Si estoy mapeando una matriz y cada uno debe ser un botón, ¿cómo diseñaría la función onPress, ya que la cantidad de botones variará según el usuario?
Actualmente tengo 3 botones que usan elementos nativos de reacción donde cada uno tiene un estilo regular, un estilo deshabilitado y el accesorio deshabilitado (verdadero o falso). Tengo 3 estados (falso como estado inicial) uno para cada botón. Cada botón tiene un onPress, que establece cada estado. Cierto para el que presioné, falso para el resto. ¿Cómo puedo aplicar esto a un número desconocido de botones?
Código actual:
//fetched data: const names : [{name: Bob, age: 20},{name: Lisa, age: 26}, {name: Tom, age: 24}, ...]; const [button1, setButton1] = useState(false); const [button2, setButton2] = useState(false); const [button3, setButton3] = useState(false); const [clickedName, setClickedName] = useState(""); const btn1sel = () => { setButton1(true); setButton2(false); setButton3(false); setClickedName("Bob"); }; const btn2sel = () => { setButton1(false); setButton2(true); setButton3(false); setClickedName("Lisa"); }; const btn3sel = () => { setButton1(false); setButton2(false); setButton3(true); setClickedName("Tom"); }; const App = () => { return( <View> <Button style={styles.btn} disabledStyle={styles.btnD} disabled={button1} onPress={btn1sel1} /> <Button style={styles.btn} disabledStyle={styles.btnD} disabled={button2} onPress={btn1sel2} /> <Button style={styles.btn} disabledStyle={styles.btnD} disabled={button3} onPress={btn1sel3} /> <Text>{clickedName}</Text> </View> ) }Puede usar un enlace useState para almacenar su matriz y actualizarla de esta manera:
const [names, setNames] = React.useState([{ name: 'Bob', age: 20, disabled: false }, { name: 'Lisa', age: 26, disabled: false }, { name: 'Tom', age: 24, disabled: false }]) const btn = (item, index) => { const arr = [...names] for(let i = 0; i < arr.length;i++){ arr[i].disabled = false } arr[index].disabled = true setClickedName(item.name) setNames(arr) }; const App = () => { return ( <View> {names.map((item, index) => { <Button style={styles.btn} disabledStyle={styles.btnD} disabled={item.disabled} onPress={() => btn(item, index)} /> })} <Text>{clickedName}</Text> </View> ) }