Problems passing props to state of the React component

Question

Problems when passing props to component state, when in component do console.log(this) The client props is there with all the fields, the more when I do console.log(this.props) he shows me the empty state. the this.state.cliente2 is always empty. Where I’m going wrong. I’ve spent hours trying to find out.

app js.

import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
import Lista from './Lista'

class App extends Component {

  constructor () {
    super()
    this.state = {cliente: {}}
  }

  componentDidMount () {
    let ClienteJson = {
      'id': 1,
      'cadastro': '2017-04-06T01:07:48.000Z',
      'nome': 'Alexandre',
      'email': '[email protected]',
      'cidade': 'PIRAPORA',
      'estado': 'MG'
    }

    this.setState({cliente: ClienteJson})
  }

  render () {
    return (
      <div className='App'>
        <div className='App-header'>
          <img src={logo} className='App-logo' alt='logo' />
          <h2>Welcome to React {this.state.cliente.nome}</h2>
        </div>

        <Lista cliente={this.state.cliente} />

        <p className='App-intro' />
      </div>
    )
  }
}

export default App

component: List

import React, { Component } from 'react'

export default class Lista extends Component {
  constructor (props) {
    super(props);
    this.state = {cliente2: this.props.cliente };
    console.log(this);
  }

  componentDidMount (prors) {

  }

  render () {
    return (
      <div>
        <ul> <li> {this.state.cliente2.nome} </li> </ul>
        <ul> <li> {this.props.cliente.nome} </li> </ul>
      </div>
    )
  }
}

Answer 1

The problem is occurring because you are updating the value after the component is rendered.

componentWillMount: is called once only, both client-side and server-side before rendering happens.

componentDidMount: called once, only on the client part, after rendering.

shouldComponentUpdate: called after rendering when the properties and the state is being set. It returns true or false to tell if the element should update.

componentWillUnmount: called when we want to disassemble the component.

So in your file app.js alter componentDidMount for componentWillMount leaving so:

componentWillMount() {
    let ClienteJson = {
        'id': 1,
        'cadastro': '2017-04-06T01:07:48.000Z',
        'nome': 'Alexandre',
        'email': '[email protected]',
        'cidade': 'PIRAPORA',
        'estado': 'MG'
    }
    this.setState({cliente: ClienteJson})
}

You can see it working on codesandbox.

Updating

As well remembered by his friend Sergio, the method constructor is only called once, so all state defined within this method, is executed before the method componentDidMount.