Tengo una serie de objetos, cada uno con nombre, altura y masa. Tengo un componente que obtiene los nombres y los muestra en el navegador. Lo que estoy tratando de hacer es, en un componente separado, obtener la altura y la masa que se correlacionan con cada nombre.
Por ejemplo tengo:
[ {name: 'Luke Skywalker', height: '172', mass: '77'}, {name: 'C-3PO', height: '167', mass: '75'} ]Debo mencionar que estoy usando reaccionar para este proyecto. Mi componente está abajo:
export default function Character(props) { const [charStats, setCharStats] = useState(""); const [currentName, setCurrentName] = useState(""); const { name } = props; useEffect(() => { axios.get(`${BASE_URL}`) .then(res => { setCharStats(res.data); setCurrentName(name); }) .catch(err => console.error(err)) }, []) return ( <div> <div>{ name }</div> <button>Stats</button> { name === currentName ? charStats.map(char => { return <Stats height={char.height} mass={char.mass} key={char.name} />; }) : <h3>Loading...</h3> } </div> ) }El accesorio de nombre que obtengo de otro componente, puedo consolarlo. Registrarlo y obtener cada nombre individual para saber que funciona. Pero con el código anterior, obtengo la altura y la masa de cada objeto devuelto en lugar de solo los que coinciden con el nombre. ¿Cómo puedo obtener específicamente la altura y la masa de cada objeto?
Parece que es posible que desee llamar a filter antes de usar map, como por ejemplo: data.filter(x => x.name === name).map(char => {.... que devuelve una colección que solo contiene el elementos que coinciden con la condición). O si solo quiere encontrar un elemento, es mejor usar .find(x => x.name === name) en su lugar