Element Variables in ReactJS
Today we will show you how to use element variables in ReactJS. Element variables is a simple variable which can hold the JSX element and it can be rendered when required.
Element variables in ReactJS, ReactJS - How to assign an JSX element to a variable and use it, Rendering Variables in React components, Assign a value to a variable in JSX for ReactJS, How to assign a value to a variable inside a map() function, react render component from variable.
Checkout more articles on ReactJS
- Scroll to the top of the page after render in ReactJS
- Create simple Popup in ReactJS
- Login App – Create login form in ReactJS using secure REST API – Part 3
- Image upload in ReactJS
- Form Validation in ReactJS
Example of Element Variables
Let's refer to the same example of the previous article where we will update the code in element variable and return it.
In previous article, we used the IF/Else condition to manage the two screen. Check the below code for your reference.
App.js
import React, { useState } from 'react';
function App() {
const [counter, setCounter] = useState(0);
const [editMode, setEditMode] = useState(false);
const [input, setInput] = useState(counter);
const handleEditClick = () => {
setInput(counter);
setEditMode(true);
}
const handleUpdateClick = () => {
setCounter(input);
setEditMode(false);
}
if (editMode) {
// Edit section
return <div>
<a href="http://www.cluemediator.com">Clue Mediator</a><br /><br />
<div>Counter: {counter}</div><br />
<input type="number" value={input} onChange={e => setInput(e.target.value)} />
<input type="button" value="Update" onClick={handleUpdateClick} />
</div>
}
else {
// Display section
return (
<div>
<a href="http://www.cluemediator.com">Clue Mediator</a><br /><br />
<div>Counter: {counter}</div><br />
<input type="button" value="Edit" onClick={handleEditClick} />
</div>
);
}
}
export default App;
Now let's convert same code, for that we have to use `let` variable to store the JSX element based on the condition and render it.
App.js
import React, { useState } from 'react';
function App() {
const [counter, setCounter] = useState(0);
const [editMode, setEditMode] = useState(false);
const [input, setInput] = useState(counter);
const handleEditClick = () => {
setInput(counter);
setEditMode(true);
}
const handleUpdateClick = () => {
setCounter(input);
setEditMode(false);
}
let element; // define variable
// store JSX to the element
if (editMode) {
// Edit section
element = <>
<input type="number" value={input} onChange={e => setInput(e.target.value)} />
<input type="button" value="Update" onClick={handleUpdateClick} />
</>
}
else {
// Display section
element = <input type="button" value="Edit" onClick={handleEditClick} />
}
return <div>
<a href="https://www.cluemediator.com">Clue Mediator</a><br /><br />
<div>Counter: {counter}</div><br />
{element}
</div>
}
export default App;
In the above code, we have returned the common part of the code, the rest of the code is extracted and stored into the variable based on the condition.
Output:
Output - Element Variables in ReactJS - Clue Mediator
That's it for today.
Thank you for reading. Happy Coding!