Realmente você está iniciando, o estado do componente como foi criado não vai funcionar, é isolado apenas a um local e nele pode ter vários estados no caso exemplifico assim:
state = {dataLoad: '', isHungry: ''};
e para alterar os seus estados podendo ser individual:
this.setState({dataLoad: true});
ou em conjunto:
this.setState({dataLoad: true, isHungry: false});
resolvi contudo exemplificar um simples componente:
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>
tem também com hooks
ou Componentes Funcionais, como nesse exemplo:
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>