Actualmente estoy trabajando en una aplicación React y tengo un componente para datos tabulares. Estoy llamando a un punto final de API que da una respuesta como esta:
{ "bitcoin": { "usd": 48904, "usd_market_cap": 925245685071.0829, "usd_24h_vol": 21781197864.07206, "usd_24h_change": -0.4811309022054875, "last_updated_at": 1640267722 } }La forma en que estructuré mis componentes acepta "bitcoin" como uno de los argumentos para el punto final de la API, y la representación de los datos en mi componente secundario es así:
<TableCell>{data.bitcoin.usd_market_cap}</TableCell> <TableCell>{data.bitcoin.usd_24h_vol}</TableCell> <TableCell>{data.bitcoin.usd_24h_change}</TableCell>¿Cómo puedo cambiar la parte de bitcoin en mi código de renderizado para que pueda aceptar el accesorio que agregué al componente de esta manera?
<CoinTableRow coin="bitcoin" currency="usd" />para que pueda usar do:
<CoinTableRow coin="ethereum" currency="usd" />Se puede acceder a las propiedades de cualquier objeto de una de dos maneras: ya sea usando la sintaxis de puntos que está usando ahora, por ejemplo, data.bitcoin , o usando la sintaxis de acceso a la matriz, por ejemplo, data["bitcoin"] .
Así que simplemente reemplace todas las instancias de data.bitcoin con data[props.coin] :
<TableCell>{data[props.coin].usd_market_cap}</TableCell> <TableCell>{data[props.coin].usd_24h_vol}</TableCell> <TableCell>{data[props.coin].usd_24h_change}</TableCell>