How to access a dynamically created DOM element in react

Question

This is something similar to what i have excluding any others divs:

import React from "react";

export default function Post({post}) {

<div className="postDesc">
    {post.sanitizedHtml} //This contains p tag inside
</div>

    )
}

This post prop is coming from an api and post.sanitizedHtml basically contains raw html that has tags such as p ,h2 etc.

What i want is to access the p tag that is inside post.sanitizedHtml so that i can use the javascript property .textContent on it and extract the information.

But i think there is no method in react like document.querySelector or document.getElementBy:Id/Classname

Also i think i can't use refs because the data is coming in dynamically and i cant write ref={something} as a prop

So what should i do to access the p tag that is there inside the post.sanitizedHtml ?

Your fast response is appreciated.

@HarshitRastogi I think that is just going to render the whole html which i have done on the other pages of the website but I just want the p tags how can i access it? — Saswat
– Saswat, Commented Oct 4, 2021 at 6:09
@Saswat you can set a ref on the outer div, and access its child nodes. This obviously means you'd have to know beforehand what you want to access inside the dynamic html. — Abhishek Sharma
– Abhishek Sharma, Commented Oct 4, 2021 at 6:26
Thanks @AbhishekSharma for your wonderful suggestion. I was thinking of something like that. If you can modify my code and post this as an answer to how can i exactly access the child nodes on the div it would be great — Saswat
– Saswat, Commented Oct 4, 2021 at 6:41

Abhishek Sharma · Accepted Answer · 2021-10-04 09:07:39Z

2

By setting a ref on the outer div, you can access its child nodes and change their properties as you like.

Read more about Child Nodes

import React, { useRef, useEffect } from 'react';

export const Post = ({post}) => {
  
  const containerRef = useRef(null);
  
  //Let's Change something inside the post
  useEffect(() => {
    if(!post.sanitizedHtml || !containerRef.current) return;
    
    const container = containerRef.current;
    const childNodes = container.childNodes; //This will be a list of child nodes
    /* let's say 0th element of childNodes is a p tag */
    childNodes[0].innerText = "Hey I changed Something";
    
    
  }, [post, containerRef])
  
  return(
    <div className="postDesc" ref={containerRef}>
      {post.sanitizedHtml}
    </div>
  )
}

edited Oct 4, 2021 at 9:07

answered Oct 4, 2021 at 8:27

Abhishek Sharma

2032 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

briang · Accepted Answer · 2021-10-04 07:29:14Z

1

In your situation, are you able to create an element with javascript and assign the sanitizedHtml to it, then just reference it from the newly created element?

const myElement = document.createElement("DIV"); 
myElement.innerHTML = post.santizedHtml;

then lookup from myElement

answered Oct 4, 2021 at 7:29

briang

911 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to access a dynamically created DOM element in react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related