How to render HTML Template as response from json in react js

Asked
Active3 hr before
Viewed126 times

5 Answers

responsetemplaterenderreact
90%

How many iterations to reach the sequence? ,I am passing the html template as value in json response content. In my application then I am trying to render the content but the output is,You can also checkout dangerouslySetInnerHTML to set innerHTML for HTML you get as string in response.,Making statements based on opinion; back them up with references or personal experience.

You can also checkout dangerouslySetInnerHTML to set innerHTML for HTML you get as string in response.

...
return (
  ...
  <div dangerouslySetInnerHTML={{ __html: data.content }} />
  ...
)
...
88%

There you go. We have successfully rendered a component dynamically from a JSON config.,Next we will use the React.createElement() function to render the component.,Now, let's take this further and render the child components as well.,As you can see, I have mapped the component key with the corresponding Reactstrap component.

1
const CardConfig = {
   2 component: "card",
   3 children: [
      4 {
         5 component: "img",
            6 src:
            7 "https://images.pexels.com/photos/2877188/pexels-photo-2877188.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
         8
      },
      9 {
         10 component: "body",
            11 children: [
               12 {
                  13 component: "title",
                     14 children: "This is a title"
                  15
               },
               16 {
                  17 component: "subtitle",
                     18 children: "This is the subtitle"
                  19
               },
               20 {
                  21 component: "text",
                     22 children:
                     23 "Some quick example text to build on the card title and make up the bulk of the card's content."
                  24
               },
               25 {
                  26 component: "button",
                     27 children: "Click Me!"
                  28
               }
               29
            ]
         30
      }
      31
   ]
   32
};
load more v
72%

In this tutorial, I’m going to show you how to display json files from local storage and external API using JavaScript and the React JS framework.,If you are interested in using vanilla JavaScript to display json data in HTML, then check out this post.,In this tutorial, I will show you how to programmatically set the focus to an input element using React.js and hooks. We will use two hooks, useRef and useEffect. Set up the Project All you...,Then, add a javascript file called GetLocalPosts.js. This javascript file has a component to deal with local object from the file posts.js. This is simpler than fetching data from an external API. You should import posts.js in GetLocalPosts.js

Firstly, Remove the code that existed within the project and create an App.js file with the following code:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        
      </div>
    );
  }
}

export default App;
load more v
65%

Now all that’s left for us to do is to write a function that checks if a component with a specific name exists. Since we’re passing down the whole block in our JSX template we’re able to access the block.component and look for that content in our newly created Components object.,To allow the component itself to access the current instance properties we’re using the block object and pass it down to the React component we will create. We use block or blok in our tutorials as they are not “components” but instances of them filled with specific values., What is Storyblok? A headless CMS that works for you and helps you organize your content. , For Content Editors Writing, editing, and publishing new content with Storyblok is easy.

The content JSON below contains an array called body which consists of multiple objects with different fields and one attribute called component which allows us to determine what component we should use to render its actual content.

const data = {
   content: {
      body: [{
            _uid: "BUY6Drn9e1",
            component: "foo",
            headline: "Foo"
         },
         {
            _uid: "gJZoSLkfZV",
            component: "bar",
            title: "Bar"
         },
         {
            _uid: "X1JAfdsZxy",
            component: "foo",
            headline: "Another headline"
         }
      ]
   }
};
load more v
75%

In this example project we parsed JSON data in three different components. The data.json file contains a complex data which have inner nodes(array) up-to first and second level. The Example1 component display the SocialMedias array data, the second component Example2 displays the Experiences array data and finally the third component Example3 displays the Skills data. This examples helps to understand how to fetch the JSON file directly in component and parse only a specific section data.

import React, { Component } from 'react';
import Example1 from './Example1';
import Example2 from './Example2';
import Example3 from './Example3';
 
class App extends Component {
    render() {
        return (
            <div className="App">
				<Example1></Example1>
				<Example2></Example2>
				<Example3></Example3>
            </div>
        );
    }
}
 
export default App;
load more v

Other "response-template" queries related to "How to render HTML Template as response from json in react js"