How to render HTML tags from API response in React Js - Headless WordPress with React Js | Ep 7

#reactjs #innerhtml #wordpress #api
In this video, we will learn how to use .env file in our react js project. If you are using some external APIs for data you must use the .env file to store your sensitive credentials like API keys. Environment variables can also help us to store our API link in one location so that we don’t have to change the link in each file manually.

dangerouslySetInnerHTML is a property that you can use on HTML elements in a React application to programmatically set their content. Instead of using a selector to grab the HTML element, then setting its innerHTML, you can use this property directly on the element.

When dangerouslySetInnerHTML is used, React also knows that the content of that specific element is dynamic, and, for the children of that node, it simply skips the comparison against the virtual DOM to gain some extra performance.

## Resources

== Social Media ==

Video Timestamp:-
00:00 - What we are doing in this Video
04:20 - Create .env file
05:55 - Using .env variables in React Js
07:55 - Get post excerpt from WordPress API
09:05 - Render HTML tags in JSX
10:35 - using dangerouslySetInnerHTML property in JSX React Js to render HTML tags
12:43 - Remove wrapping p tags in WordPress REST API response
13:21 - Create a custom plugin in WordPress
15:05 - Use remove filter hook to remove p tags from API response

[tchakravarthyd]

Dude you are legend 🎉 much appreciated for your short but yet sharp videos. I’m linking it the way you run into problem and debugging it 😂
Great work Man. Keep going!

[anand.netzoptimize]

Bro, You are designing the pages yourself then what is the meaning of headless cms? Styling should also be rendered from WP via API's correct me if I wrong.

[umairali]

How to handle this in react native Text tag?