Recibo cierta respuesta de api:
[ { "name": "cds", "user_id": "1b625caf-9bea-4846-bdec-0cbcd76149cf" }, { "name": "asd", "user_id": "1b625caf-9bea-4846-bdec-0cbcd76149cf" }, { "name": "qee", "user_id": "1b625caf-9bea-4846-bdec-0cbcd76149cf" }, { "name": "cbb", "user_id": "1b625caf-9bea-4846-bdec-0cbcd76149cf" }, { "name": "rty", "user_id": "1b625caf-9bea-4846-bdec-0cbcd76149cf" }, ]Y estoy usando un componente para mostrar los detalles de esta API:
<TouchableOpacity> <Text>Toggle</Text> </TouchableOpacity> {upcoming.map((item: any, key: any) => ( <> <UpComingComponent name={item.name} /> </> ))} Puedo mapear el componente con éxito, pero necesito tener una función, donde inicialmente el usuario puede ver solo dos UpComingComponent mapeados, y cuando el usuario hace clic en toggle , el usuario debería ver todo el UpComingComponent mapeado, y cuando vuelve a hacer clic en toggle , el usuario muestra de nuevo solo ve dos UpComingComponent .
Sé cómo ocultar/mostrar un componente, pero mi problema es que tengo que mostrar dos componentes inicialmente, luego toggle , mostrar todos los componentes y nuevamente toggle , mostrar solo dos componentes.
Puede usar Array.slice y combinarlo con una variable de estado para toggle :
const [toggle, setToggle] = useState(false) <TouchableOpacity onPress={() => setToggle(t => !t)}> <Text>Toggle</Text> </TouchableOpacity> {toggle ? upcoming.map((item: any, key: any) => ( <> <UpComingComponent name={item.name} /> </> )) : upcoming.slice(0,2).map() => ...}Puede filtrar la lista para los dos primeros elementos en función de su índice.
upcoming .filter((item, index) => (!showAll ? index < 2 : true)) .map((item) => ( <> <UpComingComponent name={item.name} /> </> ));