how can injection dynamic html element to page with next.js?

Question

how can dynamic injection html element to page with next.js? that these elements Unknown type like(input, checkbox, img,...). this element specified with api that return json type like this:

[{
   "id":"rooms",
   "title":"Rooms",
   "order":1,
   "type":"string",
   "widget":"select",
   "data":[{
            "Id":18,
            "ParentId":null,
            "Title":"One",
            "Level":null,
            "Childrens":[]
           },
            {"Id":19,
            "ParentId":null,
            "Title":"Two",
            "Level":null,
            "Childrens":[]
           },
            {"Id":20,
            "ParentId":null,
            "Title":"Three",
            "Level":null,
            "Childrens":[]
           }]
},
{
   "id":"exchange",
   "title":"Exchange",
   "order":0,
   "type":"boolean",
   "widget":"checkbox",
   "data":[]
}]

my try is:

Index.getInitialProps = async function({req, query}) {

    const res= await fetch('url api')
    var elements= await res.json() 

    var test = () => (
        <div>
            {...... convert json to html elements.......}
        </div>
    )

    return {
        test
    }
})

function Index(props) {
   return(
      <a>
        {props.test}
      </a>
   )
}

result is null, mean nothing for presentation.

the question is, Do I do the right thing? Is there a better way?

Solution

What happens is that during the transfer of props from server to client in getInitialprops, JSON is serialized and so functions are not really serialized. See https://github.com/zeit/next.js/issues/3536

Your best bet is to convert the test data into a string of HTML data and inject it using dangerouslySetInnerHTML. An example will be:

class TestComponent extends React.Component {
    static async getInitialProps() {
        const text = '<div class="homepsage">This is the homepage data</div>';
        return { text };
    }

    render() {
        return (
            <div>
                <div className="text-container" dangerouslySetInnerHTML={{ __html: this.props.text }} />
                <h1>Hello world</div>
            </div>
        );
    }
}

The catch with this is that the string you return must be a valid HTML (not JSX). So notice I used class instead of className

You can read more about it here: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

Comments

[Hooshyar Qaderi]

thanks It was very useful. But, Is this a usual injection method?

[cr05s19xx]

I won't say it is the go-to standard. There really isn't a goto standard. You could also return the json data and parse that into real JSX if you want