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
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 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:
That’s it for today.
Thank you for reading. Happy Coding!
You actually stated it very well.
Thank you!