Trying to follow the TodoMVC tutorial, but getting different results

Developer Support
1

Hope it’s not a noob question but I’m learning Plasmic by doing the ToDoMVP codegen tutorial. In the documentation the “TodoApp” component should look something like the first picture.
When I ask plasmic to generate the code, I got the second picture.

image.png

image.png
image.png777×705 76 KB

Is there somewhere in the documentation an explanation for the use of the React.forwardRef method ?

Also has someone implemented the ToDoMVP recently with this new implementation. I’m not able to retrieve the value entered in the “textbox” using a ref that is passed to the Task component (textbox.value is undefined when I try to update the Entries state - using the onChange callback)

I’m a beginner in React

2

Hello! Thanks for the feedback, I’ll be updating the tutorial soon! For now, can you try switching textbox to textInput?

3

It works with textbox. Actually I wrongly changed textbox.current!.value to textbox.value as the non-null assertion operator doesn’t seem to work in Javascript (seems to be typescript only and a discouraged practice as it can lead to run time error)

4

I can’t find the documentation of all props that can be set for Plasmic components somewhere or is it by assuming anything that can be set in their HTML equivalent? Or displayed visually in the Studio (right pane?)

5

Thanks for your fast answer!

6

Do you mean the props that can be set like this?

image.png
image.png1400×350 88.4 KB

7

Anything taskContainer can set can be set here (if it’s a div, you can get the ref, onClick, etc. If it’s a component you can set any of its props)

8

That I get but how do I know what are the props. For instance I tried textbox.current.style by inferring that as it’s an input HTML element this should be accessible (and it worked)

9

useRef<HTMLInputElement>(null) is something native to React, and it should give you auto completion for the input HTL element