My state react, doesn’t it work?

Question

Man state does not work for nothing, I have read in the documentation, I did the same as you should notice I am new in the react, example of my code:

export default class Cursos extends Component{
  
    state = {dataLoad: '' };
    state = { isHungry: '' };

    componentDidMount(){
        
     console.log(data.cursos)
       this.setState({ isHungry: 'false' });
       this.setState({
            dataLoad:'teste'
        })
        console.log(isHungry)
    }

Answer 1

Hello, how did your React project start?

You need to import the React and then write the Function. Start learning to write its components in function format that is easier to learn and current. The state stated in const where the name is the variable that will be used in your React component, and setName is where you will set the name and control that state, if you create a function, the setName('New name') serves to control this state by taking care of one of the foundations of the Act which is immutability. As I already left the name John there, it will return to you between the tags div.

import React, { useState } from 'react'

function nomeDoComponent() {
  const [name, setName] = useState('João')

  return (<div>{name}</div>)
}

export default nomeDoComponent

Answer 2

Really you are starting, the state of the component as it was created will not work, it is isolated to only one location and in it can have several states in the case so exemplify:

state = {dataLoad: '', isHungry: ''};

and to change their states may be individual:

this.setState({dataLoad: true});

or together:

this.setState({dataLoad: true, isHungry: false});

however I decided to exemplify a simple component:

class Cursos extends React.Component {  
    state = {dataLoad: '', isHungry: '' };    
    componentDidMount(){
      this.setState({dataLoad: true, isHungry: false});
    }
    render() {
      return (
        <div>
          <div>{new String(this.state.dataLoad)}</div>
          <div>{new String(this.state.isHungry)}</div>
        </div>
      )
    }
}

ReactDOM.render(<Cursos/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

has also with hooks or Functional Components, as in this example:

function Cursos() {  
  const [dataLoad, setDataLoad] = React.useState('');
  const [isHungry, setIsHungry] = React.useState('');
  React.useEffect(() => {
    setDataLoad(true);
    setIsHungry(false);
  }, []);    
  return (
     <div>
       <div>{new String(dataLoad)}</div>
       <div>{new String(isHungry)}</div>
     </div>
  )   
}

ReactDOM.render(<Cursos/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>