Estoy haciendo una solicitud AJAX y obtengo mi objeto correctamente; pero hay un problema con algunas etiquetas, estas etiquetas tienen "-" (es decir , precio de venta ). Entonces, cuando quiero imprimir en la pantalla, no puedo llamarlos correctamente en mi código JSX
render(){ return( <div>{ this.state.products.map((products)=>{ return <div> <p>{productt.id}</p> <p>{productt.name}</p> <p>{productt.sales-price}</p> </div> }) }</div> } ); } Si alguien quiere aprender más sobre el objeto, hay algunos enlaces que podrían ayudar: ejemplo de JSON
Documentación sobre la API que estoy usando
Prueba {product['sales-price']} en lugar de {product.sales-price}
render() { return ( <div> { this.state.products.map((product) => ( <div> <p>{product.id}</p> <p>{product.name}</p> <p>{product['sales-price']}</p> </div> )) } </div> ); }Está mapeando sobre una matriz. El primer argumento para la devolución de llamada del map es el elemento actual (objeto) de la matriz que está iterando, por lo que idealmente debería ser product (singular) en lugar de products (plural). Y luego necesitas acceder a las propiedades de ese objeto.
Si está devolviendo varias líneas de JSX, debe envolverlas entre paréntesis.
Finalmente, los objetos que tienen nombres de propiedades con guiones necesitan una consideración especial. Debe utilizar la notación de corchetes para acceder a los valores.
this.state.products.map(product => { return ( <div> <p>{product.id}</p> <p>{product.name}</p> <p>{product['sales-price']}</p> </div> ); });