javascript - Failure to present different components using React.portal on a single div

Question

I got a "section" component which renders all of the items I would like to collapse on click, the content which should be inside of that collapsed item is in a different component, the way I tried to render those different components(on section click) is by React.createportal. But something is wrong, I can grab the right name out of the clicked section but when I insert it inside the div's "id" attribute nothing happends, I am getting a blank div collapsing on click. the section code:

{sections.map((section, index) => {
            return (
                <div className="container" onClick={handleClick} key={index}>
                  <Icon icon= {section.icon}/>
                  <SectionTitle content={section.content}/>
                  {isClicked && section.name === sectionName && <div id={sectionName}></div>}
                </div>
            )
        })}

And the content components code:

export default function About() {
return ReactDOM.createPortal(
    <div className="about-section">
      <p>
          About works!
      </p>  
    </div>,
    document.getElementById("about")
)

}

As you can see "about" component expects a div's id value of "about" and that's exactly what happens when the "about" section is clicked, so I do not know what goes wrong, please help ?

question from:https://stackoverflow.com/questions/65599101/failure-to-present-different-components-using-react-portal-on-a-single-div

Answer 1

Waitting for answers