how to get react app to display api data as html instead of string when passed as prop

Question

i am trying to display a block of text i got from a recipe api, the text includes html elements like bold tags and links, but is wrapped in a string so its displaying the literal text current text

i need it to display the text not as a string but as jsx desired text

i am passing the api data through props const RecipeDetail = ({ recipeDetail }) => { const { image, analyzedInstructions, extendedIngredients, instructions, summary, title } = recipeDetail; i am trying to use summary, also im using material ui <Stack gap={4} sx={{ backgroundColor:'grey', borderRadius: '12px'}}> <Typography sx={{ borderBottom: 'solid red', marginRight: 'auto'}} variant='h4'> Summary </Typography> <Typography paragraph="true" align='justify' gutterBottom='true' variant='body1' sx={{ lineHeight: '2rem' }}> {summary} </Typography> </Stack> as you can see i am passing the summary in as prop because it changes based on what recipe is selected

, so how do i stop the summary from being passed in as a string

i got the desired version by passing in the jsx in as the summary desired text code but the summary wont change based on which recipe is selected

Answer 1

You should use dangerouslySetInnerHTML property on Typography like this:

<Typography dangerouslySetInnerHTML={{ __html: summary }}></Typography>

Here is the React docs about it