Styjun

How did medieval manors handle population growth? Was there room for more fields to be ploughed?

Was it illegal to blaspheme God in Antioch in 360.-410.?

Can two aircraft be allowed to stay on the same runway at the same time?

Lob Logical Read and lob read-ahead reads in NCCI

How were US credit cards verified in-store in the 1980's?

Rapid change in character

Ask one verbal question to figure out who is blind and who is mute among three persons

Could a complex system of reaction wheels be used to propel a spacecraft?

Can inductive kick be discharged without freewheeling diode, in this example?

What do the different role icons backgrounds mean?

What is the motivation behind designing a control stick that does not move?

Resources to learn about firearms?

Can UV radiation be safe for the skin?

Can I leave a large suitcase at TPE during a 4-hour layover, and pick it up 4.5 days later when I come back to TPE on my way to Taipei downtown?

Are sweatpants frowned upon on flights?

'Horseshoes' for Deer?

IList<T> implementation

Magnetic thread storage?

Create a list of snaking numbers under 50,000

Why do presidential pardons exist in a country having a clear separation of powers?

What is this "opened" cube called?

How to investigate an unknown 1.5GB file named "sudo" in my Linux home directory?

Was a six-engine 747 ever seriously considered by Boeing?

Sum and average calculator

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

how injection function with dangerouslySetInnerHTMLHow can I update NodeJS and NPM to the next versions?How can I get the full object in Node.js's console.log(), rather than '[Object]'?Uncompress gzipped http request body to json in Node.jsHow can I update npm on Windows?jest, enzyme - testing a method that returns jsxHow to create subpages in NEXT.jsHow to build next.js production?NextJS multiple fetches paralellNext.js - how to set head tags dynamicallyNext.js dynamic page params for static export

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

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?

node.js reactjs next.js

share|improve this question

edited Mar 28 at 6:41

Hooshyar Qaderi

asked Mar 27 at 23:01

Hooshyar QaderiHooshyar Qaderi

844 bronze badges

add a comment | 

0

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?

node.js reactjs next.js

share|improve this question

edited Mar 28 at 6:41

Hooshyar Qaderi

asked Mar 27 at 23:01

Hooshyar QaderiHooshyar Qaderi

844 bronze badges

add a comment | 

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?

node.js reactjs next.js

share|improve this question

edited Mar 28 at 6:41

Hooshyar Qaderi

asked Mar 27 at 23:01

Hooshyar QaderiHooshyar Qaderi

844 bronze badges

[
 "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":[]
]

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>
 )

share|improve this question

edited Mar 28 at 6:41

Hooshyar Qaderi

asked Mar 27 at 23:01

Hooshyar QaderiHooshyar Qaderi

844 bronze badges

share|improve this question

edited Mar 28 at 6:41

Hooshyar Qaderi

asked Mar 27 at 23:01

Hooshyar QaderiHooshyar Qaderi

844 bronze badges

asked Mar 27 at 23:01

Hooshyar QaderiHooshyar Qaderi

844 bronze badges

asked Mar 27 at 23:01

Hooshyar QaderiHooshyar Qaderi

844 bronze badges

1 Answer
1

active

oldest

votes

0

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

share|improve this answer

answered Mar 28 at 8:45

cr05s19xxcr05s19xx

66777 silver badges2222 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks It was very useful. But, Is this a usual injection method?
  
  – Hooshyar Qaderi
  Mar 28 at 9:26
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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
  
  – cr05s19xx
  Mar 28 at 11:31
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55387778%2fhow-can-injection-dynamic-html-element-to-page-with-next-js%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

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

share|improve this answer

answered Mar 28 at 8:45

cr05s19xxcr05s19xx

66777 silver badges2222 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks It was very useful. But, Is this a usual injection method?
  
  – Hooshyar Qaderi
  Mar 28 at 9:26
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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
  
  – cr05s19xx
  Mar 28 at 11:31
  

  
  
  
  

add a comment | 

0

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

share|improve this answer

answered Mar 28 at 8:45

cr05s19xxcr05s19xx

66777 silver badges2222 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks It was very useful. But, Is this a usual injection method?
  
  – Hooshyar Qaderi
  Mar 28 at 9:26
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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
  
  – cr05s19xx
  Mar 28 at 11:31
  

  
  
  
  

add a comment | 

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

share|improve this answer

answered Mar 28 at 8:45

cr05s19xxcr05s19xx

66777 silver badges2222 bronze badges

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>
 );
 

share|improve this answer

answered Mar 28 at 8:45

cr05s19xxcr05s19xx

66777 silver badges2222 bronze badges

answered Mar 28 at 8:45

cr05s19xxcr05s19xx

66777 silver badges2222 bronze badges

answered Mar 28 at 8:45

cr05s19xxcr05s19xx

66777 silver badges2222 bronze badges