0

I have a input, the user will entry text in the InputField component (state will change, therefore).

[...]
    constructor(props)
    this.state = {text: ''}
    this.onChange = (event) => {
        this.setState({text: event.target.value})
    }
[...]
render() {
  return (<input type='text' onChange={this.onChange} textValue={this.state.text}/>)
}

I will pass this text as props for the main component form. But it isn't working:

1st try

[...]
  constructor(props)
  this.state = {text: ''}
  this.onChange = (event) => {
    this.setState({text: event.target.value})
  }
[...]

render() {
  return(<input type='text' onChange={this.onChange} textValue={text.state.text}/>)
}

2nd try

I also tried this way: [...] constructor(props)

    this.state = {text: ''}
    this.onChange = (event) => {
        this.setState({text: event.target.value})
        this.props.textValue ({text: text})
    }
[...]

render() {
  return(<input type='text' onChange={this.onChange}/>)
}

And then I get the textValue property, so I can send the input's value within the submit.

[...]
  this.handleSubmit = () => {
    let data = {text: this.props.data}
  }
[...]
render() {
  return(
    <form onSubmit={this.handleSubmit} data={this.props.textValue}>
      <InputField/>
      <button type='submit'>Send</button>
    </form>
  )
}

Why am not I achieving what I want?

After researching the concepts behind props and state, I guess I should be doing the opposite and that's why it's getting so hard (maybe). Like, in the Form I should be using state instead of props (and InputField props instead of states, so handling the change not in InputField but in Form like this: https://stackoverflow.com/a/31756470 - I'm doing the opposite of the 'Parent with single child' example). I mixed up everything and now I'm confused where dit it all go wrong.

**Conceptual examples are more welcome than practical ones. My problem here is the theory behind this flow. **

Community
  • 1
  • 1
Melo
  • 71
  • 1
  • 8

1 Answers1

1

It's most definitely the opposite. I think instead of explaining what's wrong in your examples, I think it's just important to understand that you can keep the state in a child component, but as soon as the parent needs to access that state change, then you should abstract it up to the parents and then pass down the data to the child as a prop as well as passing down a function to update the parent's state. That is one of the golden rules of react, it never ever goes the other way around.

Jeff Lau
  • 358
  • 1
  • 9
  • Got it. I got it all wrong. Im gonna remake my app then. But it would be possible for me example to work, or is it against React concepts? – Melo Oct 31 '15 at 17:52
  • It is against React concepts. A parent has no way to physically access a child's state so it can't actually get that text value out of the child component. The only way I can think of doing it if you access the DOM and extract the value from there, but that would definitely be against React principles, as you'd try and stay out of the DOM as much as possible. Other than that the parent could pass down a callback that the child could call and update the parent's `data` prop, but mutating props would be against React principles. Also that would be the same as updating state using a callback. – Jeff Lau Nov 02 '15 at 07:53
  • I don't think you need to look too hard at how to make your current examples work, basically you want to have as many dumb components as possible that only take props, and then if you need state you put it as high as you possibly need it, children can update that state using a callback the parent gives the child and that's it. If it gets too complicated (passing too many calbacks) you should start looking at flux architecture, which abstracts state into a store. Good luck! – Jeff Lau Nov 02 '15 at 07:56