Changing inner HTML using props in styled-components

Question

I want to add a styled component in react and pass props in it. Depending on the props the inner html should be changed. So is there some CSS property or something else I can use to dynamically add text inside the component depending on my props? Can I do something like this:

const Container = styled.div<DateProps>`
background: ${props => props.date ? "green" : "red"
content: ${props => props.date ? "Your have an appointment" : "You don't have appointment"};`




<Container date />

Insetead of doing this:

date ? <Container> You have an appointment </Container> : <Container> Your don't have an appointment: </Container>

Answer 1

Try this. You need to do 2 steps. First step - use pseudo-element. Second step - additional wrapping in quotes your js expression in 'content' property.

You can see example below.

const Container = styled.div`
  background: ${(props) => (props.date ? "green" : "red")};

  :before {
    content: "${(props) =>
      props.date ? "Your have an appointment" : "You don't have appointment"}";
  }
`;

const App = () => (
  <div>
    <Container date={{}} />
  </div>
);