How to Update Child Component State from Parent Component

May 08, 2021

Problem Statement
Solution
Parent Component Example
Child Component (EmailTable)
Screenshots

Problem Statement

I have a parent component which loads some list categories. Based on the selection of this category, I want to show some data in a table. And, I have a table component which displays that data.

So, based on selectio, data on child component must change.

Solution

The solution is to maintain state in parent component, and pass the props to child component. And the child component, will read data from props.

Parent Component Example

import apiClient from '../../components/api/api_client'
import SimpleLayout from '../../components/layout/simple'
import React, { Component } from 'react'
import { Form } from 'react-bootstrap';
import EmailTable from '../../components/emailView/emailTable'

export default class Users extends Component {
  constructor(props) {
    super(props);
    this.state = {
      emails: []
    };
  }

  handleSelection = async (event) => {
    this.setState({
      emails: await apiClient.getEmailsForList(event.target.value)
    });
  }

  render() {
    const emaillist = this.props.emaillist;
    return (
      <SimpleLayout>
        <div className="row">
          <Form>
            <Form.Group controlId="exampleForm.SelectCustomSizeLg">
              <Form.Label>Email Lists</Form.Label>
              <Form.Control as="select" custom
                onChange={this.handleSelection}>
                {emaillist && emaillist.map((each, index) => {
                  return(
                    <option key={index} value={each.name}>{each.name}</option>
                  )
                })}
              </Form.Control>
            </Form.Group>
            <Form.Group>
              <EmailTable emails={this.state.emails} />
            </Form.Group>
          </Form>
        </div>
      </SimpleLayout>
    )
  }
}

Child Component (EmailTable)

Now the child component will just render data from its props.

import React, { Component } from 'react'
import { Table } from 'react-bootstrap';

export default class EmailTable extends Component {
  render() {
    return (
      <Table striped bordered hover variant="dark">
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Email</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {this.props.emails.map((each, index) => {
            return(
              <tr key={index}>
                <td>#</td>
                <td>{each.email}</td>
                <td>{each.email}</td>
                <td>{each.status}</td>
              </tr>
            )
          })}
        </tbody>
      </Table>
  )
}
}