Loop function inside html in javascript (React)-CodePudding

I want to loop over my function SliderComponent, with different inputs, inside the Html in order to create several components. I found this solution online where we build string and return as Html, using "id" and "getElementById" but I can't make it work.

 export function GrommetButtonEx() {
      return (
        <div>
          <Grommet theme={grommetTheme}>
            <Sidebar
              border={{ color: "grey", size: "medium" }}
              width="340px"
              background={{ color: "black", opacity: "strong" }}
              style={{ borderRadius: "15px" }}
            >
              <Accordion style={{ color: "grey" }}>
                <AccordionPanel
                  style={{ height: "30px" }}
                  label={
                    <Text color="white" weight="bold" size="small">
                      Joint Position
                    </Text>
                  }
                >
                  <div id="output_div"></div>
    
                  {/* This works
                  <SliderComponent
                    sliderName={"slider 5"}
                    min={0}
                    max={17}
                    step={0.1}
                  />
                   */}
                </AccordionPanel>
              </Accordion>
            </Sidebar>
          </Grommet>
        </div>
      );
    }
    
    window.onload = function () {
      var outputHTML = "";
      for (var k = 0; k < 5; k  ) {
        outputHTML  =
          '<SliderComponent sliderName={"slider '  
          k  
          '"} min={0} max={17} step={0.1}';
      }
      document.getElementById("output_div").innerHTML = outputHTML;
    };

I got the following error for:

TypeError: Cannot set properties of null (setting 'innerHTML')

at:

document.getElementById("output_div").innerHTML = outputHTML;

Is this the right way to do it, or is there a better way?

CodePudding user response：

You should use the componentDidMount hook instead of onload.

componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here (like in your case).

Read more about componentDidMount here - https://reactjs.org/docs/react-component.html#componentdidmount

CodePudding user response：

In react you can write Javascript inside the "HTML" (This is called JSX). You don't have to write any Javascript logic outside the function component.

Also, you don't have to use innerHTML, instead, you have to write in JSX (inside the HTML), and make it return an instance of the component for each time the loop runs.

And to replace the "onload" you can use a hook called componentDidMount.

As for the question of how to write the loop logic in JSX (inside the HTML), here is a link to a similar question.