Using Props in Conditional Rendering with Styled Components in React

Props can also be used for conditional rendering. Let's take the React component Block that we worked with in the last lesson.

Let's make the background for the first input yellow and for the other inputs green. To do this, add another line to the styles for the Input component and you'll get:

const Input = styled.input`
	background: ${(props) => (props.first ? 'yellow' : 'green')};

	margin: 5px;
	font-size: 18px;
`;

Let's add the prop first to the first input:

<Container>
	<Input first />
	<Input placeholder="name" type="text" />
	<Input type="password" />
</Container>

Using the conditional rendering given in the lesson theory, modify the code for the solution to the problem in the previous lesson so that when the warn prop is present, the button's text is red and its background is yellow, and without it, the background is green and the text is white. Pass warn to the second button.