I've been using styled components to customize my react application, and I'm trying to update the text color based on user selection. However, I'm having trouble seeing the changes reflected when passing the state in. Do I need to update using props instead? I tried reading through the documentation but ended up feeling even more confused. As a last resort, I decided to share the entire component here. Apologies if that's not allowed.
import React, {useState} from 'react'
import { pulse, flash} from 'react-animations'
import styled, { keyframes } from 'styled-components';
import Scan from './Components/Scan'
import Broke from './Components/Broke/Broke'
import Return from './Components/Return/Return'
import Forgot from './Components/Forgot/Forgot'
import { Button } from 'reactstrap';
const StartText = styled.h1`
font-size: 3em;
`
const Wrapper = styled.div `
display: flex;
justify-content: center;
`
const BrokeReason = styled.div `
margin-top: 15px;
margin-right: 5px;
margin-left: 3px;
border: solid #292b2c 2px;
border-radius: 3px;
background-color: #0275d8;
font-size: 1.5em;
padding: 5px;
cursor: pointer;
color: ${reason => reason.broke ? 'white' : 'red'}
`
const TotalWrap = styled.div `
`
const HeaderContainer = styled.div `
display: flex;
justify-content: center;
`
function App() {
const [reason, setReason] = useState({
broke: false,
forgot: false,
return: false
})
const click = (event) => {
if(event.currentTarget.textContent === 'I Broke My Chromebook'){
setReason({...reason, broke: !reason.broke })
} else if (event.currentTarget.textContent === 'I am returning my chromebook') {
setReason({...reason, return: !reason.return })
}else {
setReason({...reason, forgot: !reason.forgot })
}
}
return (
<TotalWrap>
<HeaderContainer>
<h1>Select your problem</h1>
</HeaderContainer>
<Wrapper>
<BrokeReason onClick={click}>I Broke My Chromebook</BrokeReason>
<BrokeReason onClick={click}>I am returning my chromebook</BrokeReason>
<BrokeReason onClick={click}>I Forgot my chromebook</BrokeReason>
</Wrapper>
{/* <Scan /> */}
{reason.broke ? <Broke style={{backgroundColor: 'red'}}/> : null || reason.return ? <Return /> : null || reason.forgot ? <Forgot /> : null}
</TotalWrap>
);
}
export default App;