Tengo dos matrices que son una matriz de diferentes animales y una matriz de nombres de animales. Quiero hacer botones de animales y cada botón de animal tiene su propio color dependiendo del tipo de animal que sea.
Estaba usando funciones de mapa pero realmente no funcionó.
export const animalColors = [ { color: '#FF6800', name: 'lion', }, { color: '#D80C18', name: 'panda', }, { color: '#FF8A3D', name: 'tiger', }, { color: '#02C75A', name: 'rabbit', }, { color: '#608DF9', name: 'bear', }, { color: '#0584F6', name: 'elephant', }, { color: '#222F3E', name: 'deer', }, { color: '#727272', name: 'bird', }, { color: '#656598', name: 'turtle', }, ]; const zoo = [ { id: '1', name: 'lion' }, { id: '2', name: 'panda' }, { id: '3', name: 'tiger' }, { id: '4', name: 'rabbit' }, { id: '5', name: 'bear' }, { id: '6', name: 'elephant' }, { id: '7', name: 'deer' }, { id: '8', name: 'bird' }, { id: '9', name: 'turtle' }, ]Estos son los códigos de mecanografiado justo debajo.
El data.docs es la matriz llamada zoo.
const BoardItemCard = ({ data }: BoardItemCardProps) => { return ( <div className="BoardItemCard"> {data && data.docs.map((item: Item, i: number) => { return ( <button style={{backgroundColor: ????}}> {item.name} </button> )Puede usar array.find() para obtener el color correspondiente:
<button style={{backgroundColor: animalColors.find(x => x.name === item.name)?.color || 'defaultColor'}}> {item.name} </button>Solo usar los métodos de iteración de Array integrados en JS está bien para esto:
var result1 = [ {id:1, name:'Sandra', type:'user', username:'sandra'}, {id:2, name:'John', type:'admin', username:'johnny2'}, {id:3, name:'Peter', type:'user', username:'pete'}, {id:4, name:'Bobby', type:'user', username:'be_bob'} ]; var result2 = [ {id:2, name:'John', email:'johnny@example.com'}, {id:4, name:'Bobby', email:'bobby@example.com'} ]; var props = ['id', 'name']; var result = result1.filter(function(o1){ // filter out (!) items in result2 return !result2.some(function(o2){ return o1.id === o2.id; // assumes unique id }); }).map(function(o){ // use reduce to make objects with only the required properties // and map to apply this to the filtered array as a whole return props.reduce(function(newo, name){ newo[name] = o[name]; return newo; }, {}); }); document.body.innerHTML = '<pre>' + JSON.stringify(result, null, 4) + '</pre>';