How to apply an id attribute to a child element of a ReactJS component ?
To apply the id attribute to a child element of the React JS component, we can use the React JS states and props. Also, using hooks we can directly access the Dom elements and modify the attributes as required.
Prerequisites
Steps to create React Application
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Project Structure:
We will update the id of the child component by passing the id using props from the parent to child component. When the button is clicked it will update the prop and hence the id and related css for the child component.
Example: Update the id of child using props from the parent to child by clicking the button.
Javascript
import { useState } from "react" ;
import "./App.css" ;
import BodyComponent from "./Bodycomponent.js" ;
function App() {
const [iD, setiD] = useState( "" );
const handleClick = () => {
setiD( "childid" );
alert( "Updated ID, hence the styling" );
};
return (
<div className= "App" >
<h1 className= "geeks" >GeeksforGeeks</h1>
<h3>
Apply an id attribute to a child element in
React
</h3>
<BodyComponent id={iD} />
<button onClick={handleClick}>Update ID</button>
</div>
);
}
export default App;
|
Javascript
import React from "react" ;
function BodyComponent(props) {
return (
<p id={props.id}>GFG A Computer Science Portal!</p>
);
}
export default BodyComponent;
|
CSS
.App {
text-align : center ;
}
.geeks {
color : green ;
}
}
button {
font-size : large ;
margin : 2% ;
background-color : green ;
color : white ;
border-radius: 5px ;
padding : 10px ;
}
#childid {
color : red ;
font-size : large ;
}
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Approach 2: Using useRef hook
The useRef is a hook that allows to directly create a reference to the DOM element in the functional component. With the help of useRef we can access the child element from DOM and can modify the id attribute.
Example: Update the id attribute using the useRef hooks when the update button is clicked.
Javascript
import React, { useRef } from "react" ;
import "./App.css" ;
function App() {
const childRef = useRef( null );
const handleClick = () => {
const child = childRef.current;
child.id = "childid" ;
alert( "Updated ID, hence the styling" );
};
return (
<div className= "App" >
<h1 className= "geeks" >GeeksforGeeks</h1>
<h3>
Apply an id attribute to a child element in
React
</h3>
<p ref={childRef}>
GFG A Computer Science Portal!
</p>
<button onClick={handleClick}>Update ID</button>
</div>
);
}
export default App;
|
CSS
.App {
text-align : center ;
}
.geeks {
color : green ;
}
button {
font-size : large ;
margin : 2% ;
background-color : green ;
color : white ;
border-radius: 5px ;
padding : 10px ;
}
#childid {
color : red ;
font-size : large ;
}
|
Step to Run Application: Run the application using the following command from the root directory of the project
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output
Last Updated :
02 Nov, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...