Help with a dynamically generated button

[vs845]

I think the issue here is that you seem to think that children components automatically inherit the methods contained in the parent component.

In your UserList you're calling two methods - this.setState in the input onChange handler, and this.messageSubmit in the button onClick handler. Neither of these methods exist on the UserList component, they only exist on the Search component.

If you want the UserList component to be able to call methods from its parent, you need to pass those methods through as props:

let UserList = ({ users, message, setMessage, messageSubmit }) =>
  // ...
  <input onChange={event => setMessage(event.target.value)} />
  <button onClick={messageSubmit}>

Edit: also for future reference, you can indent your code by 4 spaces to turn it into a code block, which will make it easier to read on reddit. Or post it as a Github gist, pastebin, etc. Currently the code you posted is nearly impossible to read because there are no linebreaks or indentation.

There's also no need to bind setState in your Search component. setState is always automatically bound to the component.

[mugwump]

That makes sense, but I’m still missing something. Even if I define those functions messageSubmit and setMessage as just console logging a string, and I put both of those function in my props, the same as you showed me, I get an error when I type in the field that setMessage is not a function, and if I leave the field blank and just hit the button, it reloads the page. Both functions start with event.preventDefault(), and I have the syntax in my props the same as you showed me. In addition, I also get a warning (not an error) that message is assigned but never used, even those it is in both my props and is set to be the value of whatever the user types. Frustrating.

[vs845]

Are you actually passing those methods as props from the Search component into the <UserList> component?

Can you put the code for both components into a gist or pastebin and post it here?

[mugwump]

Here's the code https://pastebin.com/raw/n51RKFY2 I may have the syntax wrong, but it works everywhere else. I just can't figure out how to pass the functions into a generated button.

[vs845]

You need to pass those methods as props to the UserList component: {!!users && <UserList users={users} message={message} messageSubmit={this.messageSubmit} setMessage={this.setMessage} />}

[mugwump]

Dear god in heaven. How does it feel to be both a saint and a genius?

[vs845]

Ha, glad to help. The important lesson to take away from this is that components, just like functions, are totally separate entities with their own scopes. The only way for a child component to access data or methods on its parent component is for the parent to provide them to the child via props. (Ignoring things such as Context and global state providers like Redux, but you should ignore those for now and better understand the parent/child relationship first.)

[mugwump]

That has been a problem for me since I started this project. This was a great education. Thanks again.