Loop function inside html in javascript (React)

Question

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?

You definitely have missed the concept here. What you are doing here doesn't make sense. There is no `window.onload` in react as it runs when window is loaded. ` — alireza, Nov 04 '21 at 16:07
This question shows how to perform loops inside React: [Loop inside React JSX](https://stackoverflow.com/questions/22876978/loop-inside-react-jsx) Additionally, the [React Docs show how to render multiple objects inside a loop](https://reactjs.org/docs/lists-and-keys.html). — M -, Nov 04 '21 at 17:18

score 0 · Answer 1 · answered Nov 04 '21 at 15:51

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

score 0 · Accepted Answer · answered Nov 04 '21 at 18:10

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.

Loop function inside html in javascript (React)

2 Answers2