te recomiendo primero sacar esa función del componentDidMount()
porque eso se ejecuta después del render, segundo cada vez que haces cambio a un state
que el render esté utilizando, el render se vuelve a ejecutar automáticamente, pero parece ser que this.state no está definido. Te doy dos soluciones:
Usar NEXT.JS que es una librería muy buena para lo que necesitas además de que básicamente puedes olvidarte del webpack, gracias a next tienes un nuevo método llamado getInitialProps
lo que te permite básicamente, crear un props
de esta manera
static async getInitialProps(){
let res = await fetch('http://localhost:8000/noticias')
let data = await res.json();
return {data}
}
Gracias a esto tendrás lo que necesitas directamente en los props
así:
render(){
return(
<div className="titulo-noticia">{this.props.data.destacada[0].titulo}</div>
)}
Puedes crear una función y ejecutarla en el componentWillMount
así:
getData=()=>{
fetch ('http://localhost:8000/noticias')
.then(res=>{
return res.json()
})
.then(data=>{
this.setState({data:data})
})
}
componentWillMount(){
this.getData()
}
Pero eso sí, debes definir los states que uses, para hacerlo tienes que hacer esto
constructor() {
super();
this.state = {};
//En "this.state" debes definir todo lo que vayas a usar, por ejemplo la varaiable
//"destacada" debeía ir como this.state= {destacada: []}
}
Y por último, es probable que esto ya lo sepas pero a lo mejor no, para hacer render de todos los elementos de un array simplemente debes hacer una función "map" así;
render(){
return(
{
this.state.detacada.map((element)=>{
<div className="titulo-noticia">{element}</div>
})
}
)
}