ReactJS - Passing State Parent To Child And Event Delegation Child To Parent

This is simple example with explanation which includes when to use stateful and functional component. How to declare state container in classbased component and passing same state in child component. And creating simple communication between Children to Parent.

In React, passing data from a parent to its child is pretty simple, we can easily access state data in child through props. It required a little bit of work.

Below is my parent component App.js. In component create state container as plain JavaScript object and pass the state in child component as parameter.

//Parent Class
class App extends Component {
  state = {
    userName: "Nikhil",
    lastName: "Salwe"
  }
render() {
    return (
      <div className="App container">
        <div className="row">
          <Form userData={this.state} />
        </div>
      </div>
    );
  }
}

Below is my child component Form.js. I have created child component as functional the reason I don’t want to update my state in here. This component take only input and return some JSX code to parent which eventually render on UI. we get data in props.userData object in child component.

const Form = (props) => {
    return (
        <div className="col-md-6">
            <form>
                <div className="form-group">
                    <label htmlFor="userName">UserName</label>
                    <input type="text" className="form-control" name="userName" placeholder="Enter First Name" value={props.userData.userName}/>
                </div>
                <div className="form-group">
                    <label htmlFor="lastName">Last Name</label>
                    <input type="text" className="form-control" name="lastName" placeholder="Enter Last Name" value={props.userData.lastName} />
                </div>
                
            </form>
        </div>
)
}

Once save you will see the below screen. Do not bother about the style, In the end i’ll share GitHub link of this example.

TextField with default value assign in state

OK. Lets move on this is very simple. Now I have to bind event on child elements and then modified state data in App component it is simple too. Find the below UI screen is nothing but simple form which takes input and once save it show saved data. Every field has some event listener.

Simple Form

Handling any events in React is similar to handling events on the DOM elements. React provides the event listener to which we pass an action to be executed when the click fires up.see Event Delegation Concept if need more information. The event listener is provided as a props (object of properties) to the child component so that every instance is initialized with the event listener. see the below code.

App.js

In App.js we added custom Event name formHandler and then pass it as parameter to child and also added a function changeValue which will update state with new values.

//Parent Class
class App extends Component {
  state = {
    userName: "Nikhil",
    lastName: "Salwe"
  }
changeValue = (event) => {
    const fieldName = event.target.name;
    const fieldValue = event.target.value;
    this.setState({
      [fieldName]: fieldValue
    })
    console.log(this.state)
  }
saveUserDetails = (event) => {
    event.preventDefault()
    this.setState({
      saveBtnClick: true
    })
    console.log(this.state)
  }
render() {
    return (
      <div className="App container">
        <div className="row">
          <Form formHandler={this.changeValue} userData={this.state} saveUserData={this.saveUserDetails}/>
        </div>
      </div>
    );
  }
}

In below Child component I have created event listener on input field as onChange and bind custom event name which i got in props props.formHandler. We need to define same name for event which we pass as a parameter in parent class. Whenever type something in input text field it will update the state in App.js which in parent component. see the parent implementation.

//child component
const Form = (props) => {
    return (
        <div className="col-md-6">
            <form>
                <div className="form-group">
                    <label htmlFor="userName">UserName</label>
                    <input type="text" className="form-control" name="userName" placeholder="Enter First Name" value={props.userData.userName} onChange={props.formHandler} />
                </div>
                <div className="form-group">
                    <label htmlFor="lastName">Last Name</label>
                    <input type="text" className="form-control" name="lastName" placeholder="Enter Last Name" value={props.userData.lastName} onChange={props.formHandler} />
                </div>
               <div className="form-group">
                    <button onClick={props.saveUserData} className="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
)
}

Once you modify or enter username and last name in field and hit enter you can see update state value in console.

Now do not waste time and implement same thing at you end.

Final screen with few more elements and event listeners.

Find the code on below GitHub Link

https://github.com/Nikhilsalwe/React-Medium/commits/stateManagmentExample

Kindly give suggestion in below comment box.