-1

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

D_chez12
  • 5
  • 2

1 Answers1

0

You should use dangerouslySetInnerHTML property on Typography like this:

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

Here is the React docs about it

Anastasiia Solop
  • 1,313
  • 10
  • 20