React - For Loop conditional render - not working and infinite trigger

Question

I am trying to dynamically multiple an item in my render based on a variable kind of like this

<div>
  <Multiple
    multiple={props.multiple}
    base1={props.base1}
    exp1={props.exp1}
  />
</div>

const Multiple = (props) => {
    let result = "";
    let wtf = "";
    console.log("test"); // gets triggered
    for(let i = 0; i < props.multiple; i++){
        console.log("i: "+i); // gets triggered
        result.concat("{props.base1} +"); // this doesn't work for some reason
        wtf = i; // gets triggered
    }
    console.log("result: "+result); // result is blank
    console.log("wtf:" +wtf);
    return <span>{result}</span>;
}

PROBLEM 1: Even though I am entering the for-loop, my result is not being changed and i don't understand why.

Also since I cant get it to work yet, I wanted to ask: If i do it this way, where I am concatenating {props.base1} as a string, when i return it in the render, will it show up as "{props.base1}" or will it render as the variable value?

Here is an example as to what it should look like:

base1 = abc
multiple = 2

resulting render should look like:
abc + abc +

Will concatenating my prop into a string before rendering result it in looking like this instead of the above block?

{props.base1} + {props.base1} +

PROBLEM 2: EDIT ALSO, for some reason everything in the <Multiple> component is infinitely triggering, which I also do not understand why it is happening

Answer 1

1. You are using concat, which doesn't update the original string, it creates a new string instead. What you could do is either

 let result = ''; for(let i = 0; i < props.multiple; i++) { console.log("i: "+i); // gets triggered result += `${props.base1} `; wtf = i; // gets triggered } console.log(result);

2. As far as the infinite loop problem goes, what actually is props.muitlple ? Is it an array or a string? If so, you should change your loop to

for(let i = 0; i < props.multiple.length; i++)

Edit: if props.multiple is a number, i < props.multiple should work, you should log the value in your component and check once.

Answer 2

The result string is not being properly appended to

const Multiple = (props) => {
    let result = "";
    let wtf = "";
    
    for(let i = 0; i < props.multiple; i++){
        result += props.base1.toString() + "+"
   
    }
    console.log("result: "+result); 
    return <span>{result}</span>;
}

For the infinite loop I would check it's values before entering the loop to make sure your bounds are properly set.

// add this line before for loop
console.log(props.multiple)

Answer 3

a. change to result.concat('${props.base1} + '); (backtics!!)

b.i think that maybe there is a problem with the props you pass to <Multiple ... > . check again their value, maybe log their value.