Retrieve the value of a props in the child component

0

I'm a beginner with React and I'm having a hard time recovering the value of a props in a child component. I have a component called Search, which when I click on a button, I pass via the value props to another component, which I called Map I can retrieve the value, but only within the render method. How do I retrieve the value and assign it to another variable by example or state so that I can use it in some other method?

Search.js:

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

class Busca extends Component {

  constructor(props){
    super(props);

    this.state = {
      input: '',
      cep: ''
    };

    this.buscarEndereco = this.buscarEndereco.bind(this)
  }

  buscarEndereco(){
    this.setState({
      input: '',
      cep: this.state.input
    });
  }

  updateInputValue(evt) {
    this.setState({
      input: evt.target.value
    });
  }

  render() {
    return (
      <div className="container">
      <h3>Consultade endereço</h3>
      <div className="col-md-6 jumbotron">          
              <div className="form-group row">
                  <div className="col-sm-12">
                      <p><strong>Consultar</strong></p>
                  </div>
                  <label for="colFormLabel" className="col-sm-2 col-form-label">CEP</label>
                  <div className="col-sm-5">
                      <input value={this.state.input} type="text" onChange={evt => this.updateInputValue(evt)} className="form-control" />
                  </div>
                  <div className="col-sm-3">
                      <input type="button" onClick={this.buscarEndereco} value="Buscar" className="btn btn-primary"/>
                  </div>
              </div>
      </div>

      <Mapa cep={this.state.cep}/>

    </div>
    );
  }
}

export default Busca; 

Map.js

import React, { Component } from 'react';

class Mapa extends Component {

    constructor(props){
        super(props);
    }

    render() {
        return (
            <div>
                <h1>Mapa {this.props.cep}</h1>
            </div>
        );
    }
}

export default Mapa; 
    
asked by anonymous 28.03.2018 / 20:06

2 answers

1

You can define a state in the Map component:

this.state = { cep: '' };

and in method render before return check if the value of the cep state of the component is different informed by props if it will update the state:

(this.state.cep !== this.props.cep) && this.setState({cep: this.props.cep});

Example running

class Mapa extends React.Component {

  constructor(props) {
    super(props);
    this.state = { cep: '' };
  }

  metodoA = _ => {
    alert(this.state.cep);
  }

  render() {
    (this.state.cep !== this.props.cep) && this.setState({cep: this.props.cep});
    return (
      <div>
        <h1>Mapa {this.state.cep}</h1>
        <button onClick={this.metodoA}>Exibir Mensagem</button>
      </div>
    );
  }
}

class Busca extends React.Component {

  constructor(props){
    super(props);

    this.state = {
      input: '',
      cep: ''
    };

    this.buscarEndereco = this.buscarEndereco.bind(this)
  }

  buscarEndereco(){
    this.setState({
      input: '',
      cep: this.state.input
    });
  }

  updateInputValue(evt) {
    this.setState({
      input: evt.target.value
    });
  }

  render() {
    return (
      <div className="container">
      <h3>Consultade endereço</h3>
      <div className="col-md-6 jumbotron">          
              <div className="form-group row">
                  <div className="col-sm-12">
                      <p><strong>Consultar</strong></p>
                  </div>
                  <label for="colFormLabel" className="col-sm-2 col-form-label">CEP</label>
                  <div className="col-sm-5">
                      <input value={this.state.input} type="text" onChange={evt => this.updateInputValue(evt)} className="form-control" />
                  </div>
                  <div className="col-sm-3">
                      <input type="button" onClick={this.buscarEndereco} value="Buscar" className="btn btn-primary"/>
                  </div>
              </div>
      </div>

      <Mapa cep={this.state.cep}/>

    </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <Busca />
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
    
29.03.2018 / 10:26
0

You have access to the CEP within the component that instantiates MAPA and CEP. Within the MAP you have access to the value of CEP tbm.

Your problem is: Before rendering the map you need to validate the zip, and or call an api.

In my understanding: the value of the zip is in the state of the container / component / view, when this value changes, you must call the api inside this as soon as you click the button.

Your button should call api by passing the zip value. if it returns the right, pass this value to the map, otherwise the error.

I also believe that your code is a prototype of how everything will work, because your map should be a functional component, your ZIP code as well, and only the component that uses the CEP and MAP could be a stateful component . By practical means, only the component that would be the VIEW component should be steteful or should have very strong reason for a single component to be a class component.

    
31.03.2018 / 15:31