Open In App

How to apply an id attribute to a child element of a ReactJS component ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:

Approach 1: Passing id as a prop to child component

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




// Filename - App.js
 
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




// Filename - Bodycomponent.js
 
import React from "react";
 
function BodyComponent(props) {
    return (
        <p id={props.id}>GFG A Computer Science Portal!</p>
    );
}
 
export default BodyComponent;


CSS




/* Filename - 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:

Peek-2023-10-18-12-02

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




// Filename - App.js
 
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




/* Filename - 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

Peek-2023-10-18-12-02



Last Updated : 02 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads