Hola, quiero mostrar este consejo en la pantalla, pero no pude hacerlo. Traté de mapear pero eso no ayudó. Por favor, ayúdenme.
import React, { useState, useEffect } from 'react' export default function UsersData() { const [Users, setUsers] = useState([{ "slip": { "id": 41, "advice": "Don't use Excel or Powerpoint documents for your basic word processing needs." } }]) return( <> <h2> React Fetch API Example </h2> <ul> {/* Not sure what to write here */} </ul> </> ) } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> {Users.map(e=>{e.slip}) pero no funcionó.
Debería ser tan simple como escribir una función de mapeo:
export default function UsersData() { const [Users, setUsers] = useState([ { slip: { id: 41, advice: "Don't use Excel or Powerpoint documents for your basic word processing needs.", }, }, ]); return ( <> <h2>React Fetch API Example</h2> <ul> {Users.map((user) => ( <li key={user.slip.id}>{user.slip.advice}</li> ))} </ul> </> ); }Aquí hay una muestra para su ref.
Usando la función de mapa, puede imprimir toda la matriz y el código de muestra a continuación aquí.
<ul> {Users.map((element) => ( <li key={element.slip.id}>{element.slip.advice}</li> ))} </ul>Utilizar este:
import React, { useState, useEffect } from 'react' export default function UsersData() { const [Users, setUsers] = useState([ { "slip": { "id": 41, "advice": "Don't use Excel or Powerpoint documents for your basic word processing needs." } } ]) return ( <> <h2>React Fetch API Example</h2> <ul> {Users.map(({slip})=>( <li key={slip.id}>{slip.advice}</li> ))} </ul> </> ) }