Tengo una página de reacción donde muestro todos los elementos de preguntas frecuentes en una lista dentro de un bucle de mapa de javascript. Hay dos botones sí o no. Los usuarios pueden votar una respuesta sí o no. Entonces, cada vez que el usuario haga clic en los botones, se mostrará un indicador de carga.

Página de preguntas frecuentes:

 <> { faqs.map((faq) => ( <Faq key={faq.id} faq={faq} /> )) } </>

Componente de preguntas frecuentes:

 interface IProps { faq: IFaq; } const FaqVoteSection: React.FC<IProps> = (props) => { const { faq } = props; const dispatch = useDispatch(); const { faqVoteLoading } = useSelector((state: AppState) => state.user); const [loadingState, setLoadingState] = useState< 'yesvote-loading' | 'novote-loading' | 'not-loading' >('not-loading'); const onVoteSubmit = async (vote: boolean) => { if (faq) { dispatch( faqVoteApiAction({ faq_id: faq.id, vote, }) ); setLoadingState('not-loading'); } }; const onYesVotePress = () => { setLoadingState('yesvote-loading'); onVoteSubmit(true); }; const onNoVotePress = async () => { setLoadingState('novote-loading'); await onVoteSubmit(false); }; return ( <FlexContainer> <SolidButton type={faq.vote === 'yes' ? 'primary' : 'default'} size="small" onClick={onYesVotePress} loading={loadingState === 'yesvote-loading' && faqVoteLoading} > Yes </SolidButton> <Gap /> <SolidButton size="small" type={faq.vote === 'no' ? 'primary' : 'default'} onClick={onNoVotePress} loading={loadingState === 'novote-loading' && faqVoteLoading} > No </SolidButton> </FlexContainer> ); };

Ahora, cuando hago clic en un botón de votación, quiero mostrar la carga solo para ese elemento. Pero la carga muestra todos los elementos de la lista. Creo que es por el bucle del mapa.