Soy nuevo en reactjs . Tengo una array que será
const mediumNames = ["TAMIL Medium", "ENGLISH MEDIUM"]He generado dos tarjetas usando este código:
const [selectedMediumColor, setSelectedMediumColor] = useState('') <div> {mediumNames.map((text, index,) => ( <Card style={{ border: selectedMediumColor }} onClick={() => onClickMedium(text,index)} > <div > <img className={classes.imginCardBoard} src={TNlogo}></img> <Typography className={classes.textinCardBoard} > { text} </Typography> </div> </Card> ))} </div>Quiero establecer el Color del borde al hacer clic en Tarjetas en ReactJS. Si el usuario selecciona la primera tarjeta, el color del borde debe ser azul y el color del borde de la siguiente tarjeta debe ser blanco y viceversa.
Aquí está el código de función que escribí:
const onClickMedium = (medium,indexno) => { console.log(medium) console.log(indexno) if (medium === "TAMIL Medium") { selectedMediumColor('2px solid #00adb5') } else { selectedMediumColor('') } }está configurando el color para ambas tarjetas. Aquí está la imagen: ingrese la descripción de la imagen aquí
Quiero que el color se establezca solo para una tarjeta. ¿Cómo puedo conseguir esto? Por favor, ayúdame con algunas soluciones.
Puede probar este enfoque donde puede establecer el índice seleccionado:
const [selectedIndex, setSelectedIndex] = useState('') <div> {mediumNames.map((text, index,) => ( <Card style={{ border: index === selectedIndex ? '2px solid #00adb5' : 'none'}} onClick={() => setSelectedIndex(index)} > <div > <img className={classes.imginCardBoard} src={TNlogo}></img> <Typography className={classes.textinCardBoard} > { text} </Typography> </div> </Card> ))} </div>Como respuesta de @Harshit, es un enfoque para lograr el resultado. Pero podría extenderse de la siguiente manera para manejar más de 2 medios en su caso de la siguiente manera
export default function App() { const mediumNames = ["TAMIL Medium", "ENGLISH MEDIUM"]; const mediumBorder = ["2px solid #00adb5", "2px solid red"]; const [selectedMedium, setSelectedMedium] = useState(""); const [selectedMediumIndex, setSelectedMediumIndex] = useState(""); const onClickMedium = (medium, indexno) => { setSelectedMedium(medium); setSelectedMediumIndex(indexno); }; return ( <div className="App"> <h1>Hello CodeSandbox</h1> <div> {mediumNames.map((text, index) => ( <div style={{ border: selectedMedium === text ? mediumBorder[selectedMediumIndex] : "" }} onClick={() => onClickMedium(text, index)} > <div>test</div> </div> ))} </div> </div> ); }De esta forma, puede manejar cualquier número de medios con un estilo de borde personalizado para cada medio.