Necesito especificar que no estén en los valores de matriz, uno de los botones debe estar en otro color usando un valor en el mapa .
¿Es posible? Adjunto mi código a continuación.
Código Caja de arena Código
Puede usar alguna función y verificar si el índice está disponible en la cola, mostrar rojo o azul.
export default function App() { var b = ["one", "two", "three", "soma"]; var que = [1, 2, 3]; return ( <div className="App"> {b.map((text, index) => ( <> <button style={{ backgroundColor: que.some((value) => value === index + 1) ? "red" : "blue" }} > Button </button> </> ))} </div> ); }Mejor solución:
export default function App() { var b = ["one", "two", "three", "soma"]; const set = new Set([(1, 2, 3)]); return ( <div className="App"> {b.map((text, index) => ( <> <button style={{ backgroundColor: set.has(index + 1) ? "red" : "blue", }} > Button </button> </> ))} </div> ); }Creo que quieres implementar así.
import "./styles.css"; export default function App() { var b = ["one", "two", "three", "soma"]; var que = [1, 2, 3]; return ( <div className="App"> {b.map((text, index) => ( <> <button style={{ backgroundColor: que.filter((value) => value === index + 1).length ? "red" : "blue" }} > Button </button> </> ))} </div> ); }Esta es la URL codificada https://codesandbox.io/s/sleepy-darwin-4po149?file=/src/App.js:0-415