How to make changes in styled components based on state

Question

I am using styled components to style my react application. I want to change the text color based on what I have selected. I have tried passing the state in but I don't see my changes being used. Is it only possible to update using props? I looked around the docs but just became even more confused. I decided to post the whole component. Sorry if your not supposed to do that.

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;

Answer 1

A styled component uses string interpolation (Templates literals) with a functions that takes the props of the component as the first parameter. So, you could do something like,

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: ${props => props.broke ? 'white' : 'red'}
`

And then pass the broke value to the props,

<BrokeReason broke={reason.broke}>