Me gustaría generar JSX para React-Native, pero quiero examinar cada clave/valor usando console.log() .
lo que busco:
{Object.keys(this.state.types).map((obj) => ( console.log(obj); <-- This guy <Item label={obj[TYPE]} value={obj[ID]} /> ))}Pero se arroja un error "token inesperado"
¿Cómo puedo seguir depurando mis valores dentro del mapa?
Puedes usar el operador coma:
{Object.keys(this.state.types).map((obj) => ( console.log(obj), <-- This guy <Item label={obj[TYPE]} value={obj[ID]} /> ))} Que evalúa la declaración y luego la descarta, o puede usar el || operador que evaluará console.log que devuelve false y luego devolverá el elemento React:
{Object.keys(this.state.types).map((obj) => console.log(obj) || ( <Item label={obj[TYPE]} value={obj[ID]} /> ))} Sin embargo, ambos son bastante complicados, le recomiendo que convierta su función de flecha en una flecha de varias líneas y simplemente use return :
{Object.keys(this.state.types).map((obj) => { console.log(obj); return <Item label={obj[TYPE]} value={obj[ID]} /> })} En una nota al margen: no olvide establecer la propiedad key en sus objetos devueltos desde una matriz o obtendrá una ralentización del rendimiento y una advertencia (actualmente no está haciendo esto).
Los corchetes en => ( le dicen a la función que está devolviendo un objeto (JSX se transpila en un objeto JS). Desea que el cuerpo de una función ejecute console.log() y luego devuelva el <Item> .
Convierta los corchetes en corchetes y agregue una declaración de retorno:
{Object.keys(this.state.types).map((obj) => { console.log(obj); <-- This guy return ( <Item label={obj[TYPE]} value={obj[ID]} /> ); })}