In ReactJS, we can display data in both dynamic and static ways. One of the core ideas behind the component in ReactJS is the reusability of the component with various data or dynamic data. We wanna define a component and its HTML code once, and we will be able to reuse it ; that’s where dynamic usage of the data comes in.
In this article, we will be explaining the basic concept of displaying dynamic data in ReactJS.
Display Static data into ReactJS
Let’s take a look at below code snippet,
// src/App.js
import React from 'react';
const App = () => {
return (
<div>
{/* static page heading */}
<h1 style={{ marginTop: "60px", textAlign: 'center' }}>This is Static Page Heading</h1>
{/* static paragraph */}
<p style={{ textAlign: 'center' }}>We can add some elements both dynamically and statically</p>
</div>
);
};
export default App;
As we can see in the code, we are in App.js component. Here, we have added <h1> and <p> tag; that contains some static elements (“This is Static Page Heading” and “We can add some elements both dynamically and statically”). And the preview would be something like this in our browser,
These data are hard-coded here, in this JSX code as we can see. This is not the reason we use ReactJS. Some data might be hard-coded sometimes but not all of them, always.
In the end, this App.js is a function. Now, we have seen some HTML code (<h1>, <p>) and some CSS styling in here. But where is the JavaScript other than the function?
In a single webpage, every block can be made with a single component but with different data distribution. To do that we have to send data dynamically to each element that the component contains. In JSX, we can add more than HTML. We can load dynamic data within the curly braces wrapped by the HTML tag.
Well, let’s add some JavaScript code to that function. Let’s declare two variables inside the function (before return).
// src/App.js
import React from 'react';
const App = () => {
// adding some JavaScript code inside the function.
// declaring objects
const heading = 'This is Static Page Heading';
const paragraph = 'We can add some elements both dynamically and statically';
return (
<div>
{/* static page heading */}
<h1 style={{ marginTop: "60px", textAlign: 'center' }}>This is Static Page Heading</h1>
{/* static paragraph */}
<p style={{ textAlign: 'center' }}>We can add some elements both dynamically and statically</p>
</div>
);
};
export default App;
As we can see, we have declared two variables that contain string-type data before returning <div> from this function. And this is just some plain JavaScript (variables). It has nothing to do with ReactJS. Here, we have just declared two variables. But any kind of JavaScript code can be added here.
Display Dynamic data into ReactJS
We want to output these values dynamically in the HTML code that we are returning from the App function. Typically we don’t have hardcoded data in HTML. Instead of using hardcoded data, we use a special syntax that ReactJS gives us inside of the HTML (JSX syntax).
We can replace hardcoded data with opening and closing curly braces as we mentioned earlier in this article.
// src/App.js
import React from 'react';
const App = () => {
// adding some JavaScript code inside the function.
// declaring objects
const heading = 'This is Static Page Heading';
const paragraph = 'We can add some elements both dynamically and statically';
return (
<div>
{/* added curly braces instead of harcoded data */}
<h1 style={{ marginTop: "60px", textAlign: 'center' }}>{}</h1>
{/* added curly braces instead of harcoded data */}
<p style={{ textAlign: 'center' }}>{}</p>
</div>
);
};
export default App;
The specialty of these curly braces inside JSX; is in these curly braces, between them we can run basic JavaScript expressions. For example, if we execute some number-type data such as 1 + 1 between those curly braces,
//src/App.js
import React from 'react';
const App = () => {
// adding some JavaScript code inside the function.
// declaring objects
const heading = 'This is Static Page Heading';
const paragraph = 'We can add some elements both dynamically and statically';
return (
<div>
{/* adding basic JavaScript inside curly braces */}
<h1 style={{ marginTop: "60px", textAlign: 'center' }}>{1 + 1}</h1>
<p style={{ textAlign: 'center' }}>{1 + 1}</p>
</div>
);
};
export default App;
we will see something like this in our browser,
Instead of adding 1 + 1 between those curly braces and showing the output (2) in our browser, we want to show the output of the constant variables that we have declared.
So, what we can do is, just repeat the constant variables’ names inside the curly braces.
//src/App.js
import React from 'react';
const App = () => {
// adding some JavaScript code inside the function.
// declaring objects
const heading = 'This is Dynamic Page Heading';
const paragraph = 'We can add some elements both dynamically and statically';
return (
<div>
{/* adding variables inside curly braces */}
<h1 style={{ marginTop: "60px", textAlign: 'center' }}>{heading}</h1>
<p style={{ textAlign: 'center' }}>{paragraph}</p>
</div>
);
};
export default App;
This here is also a valid JavaScript expression right there. Which is pointing to a variable or a constant (in this case, a constant). Then, JavaScript will extract the value of the variable and inject it into the JSX. If we save that and refresh the page in our browser, we will be able to see the same data that we were seeing at the start of this article. But the difference is, that now we are showing the data dynamically in our browser.
We again can see the elements inside the HTML code (“This is Dynamic Page Heading” and “We can add some elements both dynamically and statically”) just like before but this time it’s not hardcoded in the HTML code. Instead, its output dynamically and the value is taken from the constant variables we have declared inside the App function.
We now, no longer work with hardcoded texts in our HTML code but instead we have these dynamic placeholders where the value can be anything. It can be some values of calculation or even it can be some data rendering from another component.
