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

CodePudding user response：

You should use dangerouslySetInnerHTML property on Typography like this:

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

Here is the React docs about it