react – Como passar a state de um componente para outro?

Gostaria de passar a state desse componente

    import api from '../../services/api.js'                         
    //https://i9campo.github.io/Documentation/
            import Authentication from '../Authentication/Authentication';
      import { Button, Input, InputNumb } from '../update/index';
      import { Col, Label, Row, } from 'reactstrap';
        import { Authorization } from '../Authentication/Authorization'
     import { toast } from 'react-toastify';
import React, { Component } from 'react';
import InputGroupText from 'reactstrap/lib/InputGroupText';
import { InputBase } from '@material-ui/core';
import { TrainRounded } from '@material-ui/icons';
import { assign } from 'core-js/fn/object';
import CadParametro from './CadParametro';
import Select from 'react-select';
import {Modal, ModalBody, ModalHeader, ModalFooter, FormGroup} from 'reactstrap'; 


 class NavParametro extends Component{
  constructor(props){
    super(props);
    this.state={
      IDAreaServico: '',
      area: {
        objID:'',
        recomendacao: '1',
        condicaoAtual: '',
        tipoManejo: '',
        plantarHF: '',
        anoAbertura: '',
        areaArrendada: '',
        tempoRestante: '',
        nematoide: 'Sim',
        IDUltimaCultura: '',
        produtividadeArea: '',
        ultimaCalagem: '',
        doseCalagem: '',
        taxaAplicacaoCalagem: '',
        tipoCalcario: '',
        equipamentoIncorporado: '',
        v: '',
        ultimaGessagem: '',
        doseGessagem: '',
        taxaAplicacaoGessagem: '',
        efetuouFosfatagem: '',
        formaAplicacao: '',
        minaPreferencial: '',
        recomendacaoFosforo: '',
        
        nomeCultura: ''
      },
      correcaoSolo: 'Sim',
        utilizarGesso: 'Sim',
        corrigirFosforo: 'Sim',
        consideresteva: 'Não',        
          cadModal    : false, // Variável utilizada para abrir ou fechar a modal de cadastro. 
          editModal   : false, // Variável utilizada para abrir ou fechar a modal de edição. 
          deleteModal : false, // Variável utilizada para abrir ou fechar a modal de exclusão. 

          warning     : false, // Variável utilizada para abrir ou fechar a modal de alerta. 

          isLoading   : false, // Variável utilizada para colocar um time durante a validação dos botões. 

          Create      : false, // Variável utilizada para ocultar o botão novo. 
          Edit        : false, // Variável utilizada para ocultar o botão editar. 
          Del         : false // Variável utilizada para ocultar o botão delete. 

    }
    this._formValidate=this._formValidate.bind(this);
    this._updateValue=this._updateValue.bind(this);
    this.handleChange=this.handleChange.bind(this);
    this._loadparametro=this._loadparametro.bind(this);
    this._loadAuthorization = this._loadAuthorization.bind(this);
    this._toggleCad         = this._toggleCad.bind(this); 
    this._warning           = this._warning.bind(this); 
    this._loadTelaParametro = this._loadTelaParametro.bind(this);
  }

  componentDidMount(){
    this._loadparametro();
    this._loadTelaParametro();
    
  }
  
  componentWillMount(){
    this._loadAuthorization();
  }

  componentWillReceiveProps(props){
    if(this.props !== props){
      if (props.IDAreaServico !== ""){
        this.setState({IDAreaServico: props.IDAreaServico}, () => { 
          this._loadTelaParametro(); 
        }); 
      }
    }
  }


  _loadparametro = async () => {
    //let obj = await api.get('/parametro') // Documentation: https://i9campo.github.io/Documentation/#get-adubo
    //this.setState({parametro: obj.data})
  }

  _loadAuthorization = () => { 
    // Permission para Adubo. 
    // Documentation: https://i9campo.github.io/Documentation/#permission-adubo
    Authorization("Novo_param").then(res => {this.setState({Create: res})})
    Authorization("Edit_param").then(res => {this.setState({Edit: res})})
    Authorization("Del_param").then(res => {this.setState({Del: res}, () => { this.setState({isLoading: !this.state.isLoading}) })})
  }
    
  _toggleCad() {
    // Documentation https://i9campo.github.io/Documentation/#get-permission-sinc
    // O params tem que seguir o padrão definido de acordo com a documentação.
    // Documentation: https://i9campo.github.io/Documentation/#permission-adubo
    api.get("/roles/checkpermission", {params: {role: "Novo_param"}})
    .then(res => {
      if (res.data.length > 0 && res.data(0).Checked === true){
        this._warning(); 
      }else{
        this.setState({cadModal: !this.state.cadModal})
      }
    })
  }

  

_loadTelaParametro = async () => {
  let obj = await api.get("/parametroarea/getallparametroarea",{
  params:{IDAreaServico: this.props.IDAreaServico}
  });
  //let dados = Object.assign({}, this.state.area);
  this.setState({area: obj.data});
};




   // Método utilizado para abrir ou fechar a modal de alerta.
    _warning = () => { 
    this.setState({warning: !this.state.warning}); 
      }
      _usandoprops(){
       
      }

  _formValidate = (e) => {
    if (e === true) {
      this.props._proximatela(e,"tela2");
      
      
    }
  }
     
  _updateValue = (nameCamp, value) => {
    this.setState({ area: { ...this.state.area, (nameCamp): value } })
  }

  handleChange(e) {
    let obj=Object.assign({},this.state.area)
    obj(e.name)=e.value
    this.setState({area: obj})
  }
    
  render() {
      return(



        
        <div>
          
           <Modal zIndex="99999" size="lg" isOpen={this.state.cadModal} className={'modal-md modal-primary ' + this.props.className}>
      <ModalHeader toggle={this._toggleCad}>Parametro</ModalHeader>  
      <ModalBody>
        <CadParametro updateGrd={this._loadparametro} onExit={this._toggleCad}/>
      </ModalBody>
          </Modal>              
      <Row>
        <Col lg="3">

          <div className="recomendacao">
            <Label>Opção de recomendação:</Label>
          </div>
          <div className="irecomendacao">
          <Select onChange={this.handleChange}
            name={"recomendacao"}
            value={{label: this.state.area.recomendacao, value: this.state.area.recomendacao}} 
            options={(
              { label: "1", name:"recomendacao", value:"1"},
              { label: "2", name:"recomendacao", value:"2"},  
              { label: "3", name:"recomendacao", value:"3"},
              { label: "4", name:"recomendacao", value:"4"}, 
              { label: "5", name:"recomendacao", value:"5"},
              { label: "6", name:"recomendacao", value:"6"}, 
              { label: "7", name:"recomendacao", value:"7"},
              { label: "8", name:"recomendacao", value:"8"},
              { label: "9", name:"recomendacao", value:"9"},
              { label: "10", name:"recomendacao", value:"10"},
              
            )} 
          />
 
          </div>

          <div className="condicao">
            <Label>Condição:</Label>
          </div>
          <div className="icondicao">
            <Input disabled={true} updateValue={this._updateValue} value={this.state.area.condicaoAtual} name="condicaoAtual" max="50" type="text" />
          </div>

          <div className="manejo">
            <Label>Manejo:</Label>
          </div>
          <div className="imanejo">
            <Input disabled={true} updateValue={this._updateValue} value={this.state.area.tipoManejo} name="tipoManejo" max="50" type="text" />
          </div>

          <div className="cultura">
            <Label>Cultura HF:</Label>
          </div>
          <div className="icultura">
            <Input disabled={true} updateValue={this._updateValue} value={this.state.area.plantarHF} name="plantarHF" max="50" type="text" />
          </div>

          <div className="ano">
            <Label>Ano abertura:</Label>
          </div>
          <div className="iano">
            <Input disabled={true} updateValue={this._updateValue} value={this.state.area.anoAbertura} name="anoAbertura" max="50" type="text" />
          </div>

          <div className="arrend">
            <Label>Arrendamento:</Label>
          </div>
          <div className="iarrend">
            <Input disabled={true} updateValue={this._updateValue} value={this.state.area.areaArrendada} name="areaArrendada" max="50" type="text" />
          </div>

          <div className="rest">
            <Label>Restante (anos):</Label>
          </div>
          <div className="irest">
            <Input disabled={true} updateValue={this._updateValue} value={this.state.area.tempoRestante} name="tempoRestante" max="50" type="text" />
          </div>

          <div className="nemato">
            <Label>Tem nematoide de cisto:</Label>
          </div>
          <div className="inemato">
          <Select onChange={this.handleChange}
            name={"nematoide"}
            value={{label: this.state.area.nematoide, value: this.state.area.nematoide}} 
            options={(
              { label: "Sim", name:"nematoide", value:"Sim"},
              { label: "Não", name:"nematoide", value:"Não"},
              { label: "Sem informação", name:"nematoide", value:"Sem informação"}
            )} 
          />
          </div>

          <div className="culturaant">
            <Label>Cultura anterior:</Label>
          </div>
          <div className="iculturaant">
            <Input disabled={true} updateValue={this._updateValue} value={this.state.area.nomeCultura} name="nomeCultura" max="50" type="text" />
          </div>

          <div className="prod">
            <Label>Produtividade(Und/Ha):</Label>
          </div>
          <div className="iprod">
            <Input disabled={true} updateValue={this._updateValue} value={this.state.area.produtividadeArea} name="produtividadeArea" max="50" type="text" />
          </div>

        </Col>
        <Col lg="3">
          <Label>ACIDEZ</Label>
          <br></br>


          <div className="anoult">
            <Label>Ano última calagem:</Label>
          </div>
          <div className="ianoult">
            <Input disabled={true} updateValue={this._updateValue} value={this.state.area.ultimaCalagem} name="ultimaCalagem" max="50" type="text" />
          </div>

          <div className="dose">
            <Label>Dose média (Kg/Ha):</Label>
          </div>
          <div className="idose">
            <Input disabled={true} updateValue={this._updateValue} value={this.state.area.doseCalagem} name="doseCalagem" max="50" type="text" />
          </div>

          <div className="form">
            <Label>Forma de Aplicação:</Label>
          </div>
          <div className="iform">
            <Input disabled={true} updateValue={this._updateValue} value={this.state.area.taxaAplicacaoCalagem} name="taxaAplicacaoCalagem" max="50" type="text" />
          </div>

          <div className="calcutil">
            <Label>Calcário utilizado:</Label>
          </div>
          <div className="icalcutil">
            <Input disabled={true} updateValue={this._updateValue} value={this.state.area.tipoCalcario} name="tipoCalcario" max="50" type="text" />
          </div>

          <div className="equip">
            <Label>Equipamento utilizado:</Label>
          </div>
          <div className="iequip">
            <Input disabled={true} updateValue={this._updateValue} value={this.state.area.equipamentoIncorporado} name="equipamentoIncorporado" max="50" type="text" />
          </div>

          <div className="vant">
            <Label>V% anterior:</Label>
          </div>
          <div className="ivant">
            <Input disabled={true} updateValue={this._updateValue} value={this.state.area.v} name="v" max="50" type="text" />
          </div>

        </Col>
        <Col lg="3">
          <Label>ENXOFRE</Label>
          <br></br>
          <div className="anogess">
            <Label>Ano última gessagem:</Label>
          </div>
          <div className="ianogess">
            <Input disabled={true} updateValue={this._updateValue} value={this.state.area.ultimaGessagem} name="ultimaGessagem" max="50" type="text" />
          </div>

          <div className="dosemed">
            <Label>Dose média (Kg/Ha):</Label>
          </div>
          <div className="idosemed">
            <Input disabled={true} updateValue={this._updateValue} value={this.state.area.doseGessagem} name="doseGessagem" max="50" type="text" />
          </div>

          <div className="formaplicenx">
            <Label>Forma de aplicação:</Label>
          </div>
          <div className="iformaplicenx">
            <Input disabled={true} updateValue={this._updateValue} value={this.state.area.taxaAplicacaoGessagem} name="taxaAplicacaoGessagem" max="50" type="text" />
          </div>
          <br></br>


          <Label>FÓSFORO</Label>
          <br></br>
          <div className="efetfos">
            <Label>Efetuou fosfogem:</Label>
          </div>
          <div className="iefetfos">
            <Input disabled={true} max="50" type="text" updateValue={this._updateValue} value={this.state.area.efetuouFosfatagem} name="efetuouFosfatagem" />
          </div>

          <div className="formaplicfosf">
            <Label>Forma de aplicação:</Label>
          </div>
          <div className="iformaplicfosf">
            <Input disabled={true} max="50" type="text" updateValue={this._updateValue} value={this.state.area.formaAplicacao} name="formAplicacao" />
          </div>

          <div className="fosfutil">
            <Label>Fosfato utilizado:</Label>
          </div>
          <div className="ifosfutil">
            <Input disabled={true} max="50" type="text" updateValue={this._updateValue} value={this.state.area.minaPreferencial} name="minaPreferencial" />
          </div>


          <div className="metfosf">
            <Label>Método de recomendacao de fósforo:</Label>
          </div>
          <div className="imetfosf">
            <Input disabled={true} max="50" type="text" updateValue={this._updateValue} value={this.state.area.recomendacaoFosforo} name="recomendacaoFosforo" />
          </div>

        </Col>
        <Col lg="3">
          <Label>VAI APLICAR</Label>
          <br></br>
          <div className="calcar">
            <Label>Calcário:</Label>
          </div>
          <div className="icalcar">

          <Select onChange={this.handleChange}
            name={"correcaoSolo"}
            value={{label: this.state.correcaoSolo, value: this.state.correcaoSolo}} 
            options={(
              { label: "Sim", name:"correcaoSolo", value:"Sim"},
              { label: "Não", name:"correcaoSolo", value:"Não"},  
            )} 
          />
          </div>

          <div className="gess">
            <Label>Gesso:</Label>
          </div>
          <div className="igess">              
           <Select onChange={this.handleChange}
            name={"utilizarGesso"}
            value={{label: this.state.utilizarGesso, value: this.state.utilizarGesso}} 
            options={(
              { label: "Sim", name:"utilizarGesso", value:"Sim"},
              { label: "Não", name:"utilizarGesso", value:"Não"},  
            )} 
          />
          </div>

          <div className="fosforo">
            <Label>Fósforo:</Label>
          </div>
          <div className="ifosforo">
          <Select onChange={this.handleChange}
            name={"corrigirFosforo"}
            value={{label: this.state.corrigirFosforo, value: this.state.corrigirFosforo}} 
            options={(
              { label: "Sim", name:"corrigirFosforo", value:"Sim"},
              { label: "Não", name:"corrigirFosforo", value:"Não"},  
            )} 
          />
          </div>
          <br></br>

          <div className="resteva">
            <Label>Considerar da resteva:</Label>
          </div>
          <div className="iresteva">
          <Select onChange={this.handleChange}
            name={"consideresteva"}
            value={{label: this.state.consideresteva, value: this.state.consideresteva}} 
            options={(
              { label: "Sim", name:"consideresteva", value:"Sim"},
              { label: "Não", name:"consideresteva", value:"Não"},  
            )} 
          />
          </div>
          <button className="mr-2" hidden={ this.state.Create } onClick={ () => { this._toggleCad()    }} title="Novo"><i className="fa fa-file-o fa-2x"></i></button>
          <br></br>
          <br></br>
          <br></br>
          <div className="btnparametro">
            <Row>
              <Col>
                <Button color="primary" value="Confirmar" form={this._formValidate} {...this.state}/>
              </Col>
              <Col>
                <button className="btn btn-danger" type="button"> Cancelar </button>
              </Col>
            </Row>

          </div>

        </Col>


      </Row>
        
      </div>
        
        
      )};
  }
   export default NavParametro;

Para esse

import NavParametro from './NavParametro'
import NavMetodoCorrecao from'./NavMetodoCorrecao';
import NavMetodoSolo from './NavMetodoSolo';
import NavCorretivos from './NavCorretivos';
import icon from '../../img/bng.png'
import React, { Component } from 'react'
import {  Card, CardBody, CardHeader, Col,Row, } from 'reactstrap';
import Filtro from '../FiltroRecoZoneamento/NavFiltro'; 
import { Button, Input, InputNumb } from 'reg_validate';
export default class FrmNavParametro extends Component {
  constructor(props){
    super(props);
    this.state={
      tela2:0,
      IDAreaServico:'',
      obj:()
      
    }
    this._proximatela       = this._proximatela.bind(this); 
    this._onSetIdAreServico = this._onSetIdAreServico.bind(this); 
    this._usandoprops   = this._usandoprops.bind(this);
  }

  

  _proximatela(e,nametela){
    if( e === true && nametela === "tela2"){
      this.setState({ tela2 : 1 });
    }
    if(e===true && nametela==="tela3"){
      this.setState({tela2:2});
    }
    if(e===true && nametela==="tela4"){
      this.setState({tela2:3});
    }
  }

  _onSetIdAreServico=(e) =>{
    this.setState({IDAreaServico: e});
  }
 
  _usandoprops(props){
    obj:this.props.area
  }


  render() {


    return (
      <div className="animated fadeIn">
        <Col md="12">
          <Row className="justify-content-center justify_container">
            <Col md="12">
            <Card className="cardparametro">
            <div className="filtroparametro">  
            <Filtro setAreaServico={this._onSetIdAreServico} zoneamento={true} parametro={true}/>
              </div> 
              <Row className="btns">  
              <button className="btnpara">Início</button>
                <button className="btnpara">Acidez</button>
                <button className="btnpara">Potássio</button>
                <button className="btnpara" >Enxofre</button>
                <button className="btnpara">Fósforo</button>                    
              </Row> 
            </Card>
            {(() => {
        if (this.state.tela2===2) {
          return (
            
            <Card>
            <CardHeader><img src={ icon } width="25" height="25"/> Método de Correção 1 </CardHeader>
            <CardBody>
            <NavMetodoSolo  _proximatela={this._proximatela} _usandoprops={this._usandoprops}/>
            </CardBody>
             </Card>
                   
          )
        } else if (this.state.tela2===3) {
          return (          
           <Card>
           <CardHeader><img src={ icon } width="25" height="25"/> Corretivos </CardHeader>
           <CardBody>
           <NavCorretivos  _proximatela={this._proximatela} _usandoprops={this._usandoprops}/>
           </CardBody>
            </Card>
          )
        }else if (this.state.tela2===1) {
          return (
            <Card>
            <CardHeader><img src={ icon } width="25" height="25"/> Método de Correção 2</CardHeader>

            <CardBody>
            <NavMetodoCorrecao _proximatela={this._proximatela} _usandoprops={this._usandoprops}/>
            </CardBody>

          </Card>

          )
        } 
        
        else {
          return (       
            <Card> 
            <CardHeader><img src={ icon } width="25" height="25"/> Parametro da Área </CardHeader>
            <CardBody><NavParametro _proximatela={this._proximatela} IDAreaServico={this.state.IDAreaServico}/></CardBody>
            
          </Card>
          )
        }
      })()}
            
            </Col>
          </Row>
        </Col>
      </div>
    
    )}
}