How to access value from child to parent component in react

Question

I am trying to access child component value in parent so there I want to use it for update the state . Actually In child component I have dropdown selection where I am storing select value in state . so I want to access that store value in parent component . I give it tried but I am not able to access it value . Could someone please help me how to access it value

Parent Component

import React, { Component } from 'react'

 export default class Parent extends Component {
  constructor(){
   super();
    this.state={
     updatedValue:''
     }
    }
  render() {
    return (
      <div>

      </div>
    )
  }
}

Child Component

import React, { Component } from "react";
import Input from "./input";
import axios from "axios";

class SelectData extends Component {
  constructor() {
    super();
    this.state = {
      extractedValue: ""
    };
  }

  componentDidMount() {
    axios
      .get(
        `/api/customer/find?limit=10&offset=0&userId=${localStorage.getItem(
          "user_id"
        )}&status=1`
      )
      .then(res =>
        this.setState({
          customerDetails: res.data.items
        })
      );
  }

  handleCustomer = e => {
    let customerValue = e.target.value;
    this.setState({
      extractedValue:customerValue
    });
  };

  render() {
    return (
      <div>
            <input
              type="text"
              list="data"
              onChange={this.handleCustomer}
              className="customerSelection"
              placeholder="Customer Name"
            />
            <datalist id="data">
              {this.state.customerDetails.map(customer => (
                <option value={customer.id}>
                  {customer.firstName} {customer.lastName}
                </option>
              ))}
            </datalist>
      </div>
    );
  }
}

export default SelectData;

As you see Code , I want to access extractedValue state value of child component in Parent .

Answer 1

A function can be passed down using props to the child to pass up values from the child to the parent, an example:

Parent:

import React, { Component } from 'react'
import {Child} from "./Child";

export default class Parent extends Component {
    state = {
        customerName: ""
    }

    onCustomerChange = (newName) => {
        this.setState({
            customerName: newName
        })
    }

  render() {
      const {customerName} = this.state;

    return (
      <div>
            <Child handleCustomerChange={this.onCustomerChange} customerName={customerName} />
      </div>
    )
  }
}

Child:

import React, { Component } from "react";
import Input from "./input";
import axios from "axios";

export class Child extends Component {
  componentDidMount() {
    axios
      .get(
        `/api/customer/find?limit=10&offset=0&userId=${localStorage.getItem(
          "user_id"
        )}&status=1`
      )
      .then(res =>
        this.setState({
          customerDetails: res.data.items
        })
      );
  }

  render() {
      const {handleCustomerChange, customerName} = this.props;

    return (
      <div>
            <input
              type="text"
              list="data"
              onChange={e => handleCustomerChange(e.target.value)}
              value={customerName}
              className="customerSelection"
              placeholder="Customer Name"
            />
            <datalist id="data">
              {this.state.customerDetails.map(customer => (
                <option value={customer.id}>
                  {customer.firstName} {customer.lastName}
                </option>
              ))}
            </datalist>
      </div>
    );
  }
}

Checkout the docs: https://reactjs.org/docs/thinking-in-react.html#step-5-add-inverse-data-flow