I have a simple quiz app that always has the same answers, with different points to each one.
When USER presses, I want the button to be selected, change color, pass the id to a state.When USER presses another, I want to de-select the first button and select this instead.
Using React functional components, ReactHooks, styled-components and TypeScript.
the buttons:
<AnswerButton id="1" isSelected={isSelected} style={shadow} onPress={handleAnswer}><AnswerText>Muito Correto</AnswerText></AnswerButton><AnswerButton id="2" style={shadow} isSelected={isSelected} onPress={handleAnswer}><AnswerText>Moderadamente Correto</AnswerText></AnswerButton>
styled-components:
export const AnswerButton = styled.TouchableOpacity<AnswerProps> background: ${darken(0.05, #EEEDED)}; border-radius: 35px; padding: 15px; margin-bottom: 25px; border: 2px solid #64007b; ${props => props.isSelected && css border-color: #c53030; background-color: #fff8f7; border-width: 2px; };export const AnswerText = styled.Text color: #64007b; font-family: 'RobotoSlab-Medium'; font-size: 18px; line-height: 30px; text-align: center;;