-1

I have a main page component in react whose render function looks like this

const MainPage = () => {
    return (
         <>
              <Component1 />
              <Component2 />
         </>
    )
}

And Component has some inputs

const Component1 = () => {
    const [val1, setVal1] = React.useState("");
    const [val2, setVal2] = React.useState("");
    return (
         <>
              <input type="text" value={val1} onChange={setVal1} />
              <input type="text" value={val2} onChange={setVal2} />
         </>
    )
}

My question is how to get values val1 and val2 in the MainPage component? Thanks in advance

2
  • I feel you cant do it that way, you should have the state values in the MainPage component, or if you need to make use of that values you have to make use of the context API
    – Nacho
    Commented Oct 11, 2021 at 10:30
  • @Nacho I believed this method will result in unnecessary prop drilling. So wanted to make sure if there's any other better method.
    – Yahak Khan
    Commented Oct 11, 2021 at 11:50

2 Answers 2

0

use Redux or Context API in your React Project. Btw you can call the function to get the children component variables value.

Example React using Class

class Parent extends Component {
  constructor() {
    this.state = {
      value: ''
    };
  }

  //...

  handleChangeValue = e => this.setState({value: e.target.value});

  //...

  render() {
    return (
      <Child
        value={this.state.value}
        onChangeValue={this.handleChangeValue}
      />
    );
  }
}

class Child extends Component {
  //...

  render() {
    return (
      <input
        type="text"
        value={this.props.value}
        onChange={this.props.onChangeValue}
      />
    );
  }
}
1
  • I dont know how this solves my problem. You have just maintained the state in parent component level and passing it as props to children
    – Yahak Khan
    Commented Oct 11, 2021 at 11:48
0

You can't. React is based on Unidirectional Data Flow

So to solve your problem you must define an event that will be called from the children.

const MainPage = () => {
    const [val1, setVal1] = React.useState("");
    const [val2, setVal2] = React.useState("");
    return (
         <>
              <Component1 val1={val1} onChange1={setVal1} val2={val2} onChange2={setVal2} />
              <Component2 />
         </>
    )
}

And Component1

const Component1 = ({val1, onChange1, val2, onChange2}) => {
    return (
         <>
              <input type="text" value={val1} onChange={onChange1} />
              <input type="text" value={val2} onChange={onChange2} />
              />
         </>
    )
}
1
  • I already know this method. I thought this involves unnecessary prop drilling. Thanks for the info. Will continue this approach only
    – Yahak Khan
    Commented Oct 11, 2021 at 11:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.