How to send data from child to parent component

Question

Can you please tell me, If I want to send data from child component to parent component and use it's value. How can I do it.

For Ex- In my child component there is a checkbox. Whose checked or unchecked value needs to send on the parent component, which I further utilize in the condition

Can it be possible. If yes, can you please send some link or snippet

Snippet looks like this

in parent class

onHandleClick(value) {.....some code}

<ChildComponent onHandleClick={onHandleSaveClick} />

In child class, it looks like

onCheckBoxHandle() {
.....some code
    }

<input type="checkbox" onClick={this.onCheckBoxHandle} label="Some text" />

but neither parent function called nor the child function called

Thanks for your help!

Does this help you? https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs — max, May 24 '20 at 08:57
Does this answer your question? [How to pass data from child component to its parent in ReactJS?](https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs) — devserkan, May 24 '20 at 09:02
no sir, I'm unable to understand in the parent component I'm calling event with some parameter but not passing such parameter in child component — user2422044, May 24 '20 at 12:32

score 1 · Answer 1 · answered May 24 '20 at 09:42

Welcome Stack Overflow! To send data from the child component to the parent component, you must type a function in the parent component and send it to the child component as a props first. you can then take these props in the subcomponent and send values into it, and then use them as you wish in the main component and manage your application.

You'll see what the example I've prepared here is like.

//ChildB component
class ChildB extends React.Component {

  render() {

    var handleToUpdate = this.props.handleToUpdate;
    return ( < div > < button onClick = {
      () => handleToUpdate('someVar')
    } > Push me < /button></div > )
  }
}

//ParentA component
class ParentA extends React.Component {

  constructor(props) {
    super(props);
    var handleToUpdate = this.handleToUpdate.bind(this);
    var arg1 = '';
  }

  handleToUpdate(someArg) {
    alert('We pass argument from Child to Parent: ' + someArg);
    this.setState({
      arg1: someArg
    });
  }

  render() {
    var handleToUpdate = this.handleToUpdate;

    return ( < div >
      <
      ChildB handleToUpdate = {
        handleToUpdate.bind(this)
      }
      /></div > )
  }
}

if (document.querySelector("#demo")) {
  ReactDOM.render( <
    ParentA / > ,
    document.querySelector("#demo")
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>

<div id="demo">134</div>

score 0 · Answer 2 · answered May 24 '20 at 09:03

0

You can manage it in 2 steps:

1) In your parent component you need make state.

2) Pass to child component function as props, which changes parent state.

Parent component:

const [state,setState] = useState();

const handleFunction = () => {
setState(someValue)
}
...

<ChildComponent handleFunction={handleFunction} />

Child component:

const {handleFunction} = props

<button onClick={handleFunction}>Some action</button>

answered May 24 '20 at 09:03

markovpavel.ru

747
1
5
13

It is what I want, but not getting it correctly any link in which this is properly explained or a working snippet is greatly appreciated. Thanks – user2422044 May 24 '20 at 09:12
just give your sandbox link as a example – markovpavel.ru May 24 '20 at 18:11
sorry no sandbox link I've right now. Can you tell me in above snippet how to pass parameters as well – user2422044 May 25 '20 at 03:34

score 0 · Answer 3 · answered May 24 '20 at 09:18

0

yes you can. You need to pass function from parent to child and call that function on checkbox change.

function Parent () {
  const onChildChange = (value)=>{
  // do something 
  }

  return <Child onChildChange={onChildChange} />;
}

function Child (props) {
  const [checkbox, setCheckbox] = useState(true);

  const handleChange = () => {
    const target = event.target;
    const value =  target.checked;
    setCheckbox(value);
    props.onChildChange(value);
  };  

return (
  <div>
    <input
      name="isGoing"
      type="checkbox"
      checked={checkbox}
      onChange={handleChange}
    />
  </div>
)}

answered May 24 '20 at 09:18

TigranK

21
5

what will be the default value in return which is setting in parent and where that default value is set – user2422044 May 24 '20 at 10:23
it's an example of getting data from the child. Depending on your case you have many ways to implement checkbox. If you want to store checkbox value in the parent pass to child value and onChange function. Step by step instructions you can find in ReactJs official documentation. – TigranK May 25 '20 at 12:58

How to send data from child to parent component

3 Answers3