JSX Content Type question

Questions and Answers
1
System Information
  • Strapi Version: 3.6.3
  • Operating System: Mac OSX
  • Database: sqlite
  • Node Version: 14.16
  • NPM Version: 6.14.11
  • Yarn Version:

I’m trying to set up a Next.js application that will serve blog pages, and some of that content will have Javascript/JSX code in it. Does anyone know how I should configure my content types in strapi?
For example, in my blog content I may have the following code:
<VideoPlayer
ref=“videoplayer”
preload={this.props.preload}
classes={this.props.classes}
videoID={this.props.videoID}
controls=“controls”
/>

NOTE: In order for me to get the above HTML displayed I had to escape the lt and gt symbols, but that doesn’t work in my strapi data fields.

to be displayed and formatted over multi lines, with the indentations respected.

Does anyone know how to configure strapi (and even Next.js) to store and then display code?

Thank you in advance,

Rich

2

Ugh, sorry - forgot to mention that I’ve already tried testing with field of type Rich Text and plain old Text. Neither worked, my code just gets displayed inline with none of the formatting respected.

3

I lived all my life to this time, here is where i get into: Uzmani Tech | Three different ways to render a videos using React-Markdown

Don’t be shy to give comments about it.

4

I only used the VideoPlayer code as a sample, displaying a video in JSX is not my issue. How do I store JSX code in the DB/CMS then retrieve and display in my component? I’ve tried using a Rich text field and a plain Text field, and my JSX code does not appear on screen like it does if I hard code it in my return() statement directly in my component.

5

When you stores a JSX code, it will be treated as a string code, you need to parse it in your component from that string to a compilable code, but as far as i know, it is hard and it is unsecure; so, not good approach; what do you need to do?

6

All I want to do is blog about some JSX code. If I include this code directly in my .js file:

it works fine, I see

on screen.

But when i store that same code in Strapi, then call it from the API, I get:

 on screen.


Which is not what I want.


So it sounds like Strapi can’t do this?


Rich

            


            

              
              
              
            


            

                
                
              


          

          

            

              

              


              
                  
                  
              7
              
            

            

              
Sorry, but i can’t see your code, can you share screens?