In this component:
const MovieComponent = (props) => {
const { Poster, Price, Title, cinemaWorldPrice } = props.movie;
return (
<MovieContainer>
<CoverImage src={Poster} alt="" />
<MovieName>{Title}</MovieName>
<InfoColumn>
<MovieInfo>FilmWorld: ${Price}</MovieInfo>
<MovieInfo>CinemaWorld: ${cinemaWorldPrice}</MovieInfo>
</InfoColumn>
</MovieContainer>
);
};
I'm wanting to write a ternary expression that will change the font color of:
<MovieInfo>FilmWorld: ${Price}</MovieInfo>
<MovieInfo>CinemaWorld: ${Price}</MovieInfo>
Something basically saying
if (Filmworld Price > CinemaWorld Price) { Filmworld Price = color: "green"}
and vice versa. Is this possible? And would the code be in the movie info section? This is on React.
You need to
${} is only for template literals)const MovieComponent = (props) => {
const { Poster, Price, Title, cinemaWorldPrice } = props.movie;
return (
<MovieContainer>
<CoverImage src={Poster} alt="" />
<MovieName>{Title}</MovieName>
<InfoColumn>
<MovieInfo>
FilmWorld:
<span style={Price > cinemaWorldPrice ? { color: 'green' } : null}>{Price}</span>
</MovieInfo>
<MovieInfo>
CinemaWorld:
<span style={Price < cinemaWorldPrice ? { color: 'green' } : null}>{cinemaWorldPrice}</span>
</MovieInfo>
</InfoColumn>
</MovieContainer>
);
};