Loop components without array

Question

I have a render in my component that renders out many components and i want it to repeat some of them. The problem I have is when I create an HTML render the variable is not being processed and it is displaying as text.

The actual code contains many more componentsbut I have simplified it

MY code

export default function(props) {
  const bookData = props.bookData;
  const pageStart = props.pageStart;
  // Create Diary HTML
  const myLoop = (loopNumber, pageStart) => {
    let html = '';
    for (let i = 0; i < loopNumber; i++) {
      let singleLoop = `<DiaryByDay loop={${i}} />`;
      html = html + '  ' + singleLoop;
    }
    return html;
  };

const dayByDayPages = myLoop(1, 3);
const dayByDayReturn = <Fragment>  {dayByDayPages}  </Fragment>
console.log(dayByDayReturn)


  return (
    dayByDayReturn
  );
}

This is what it looks like when I run my code

Could you please make a reproducible example to show what you are actually getting? — Jacob
– Jacob, Commented Mar 4, 2020 at 9:57

Vengleab SO · Accepted Answer · 2020-03-04 10:44:48Z

1

You should use JSX element as return type

export default function(props) {
  const bookData = props.bookData;
  const pageStart = props.pageStart;
  // Create Diary HTML
  const myLoop = (loopNumber, pageStart) => {
    return [...new Array(loopNumber)].map(i => <DiaryByDay loop={i} />);
  };

  const dayByDayPages = myLoop(1, 3);
  const dayByDayReturn = <Fragment> {dayByDayPages} </Fragment>;
  console.log(dayByDayReturn);
  return dayByDayReturn;
}

answered Mar 4, 2020 at 10:44

Vengleab SO

8165 silver badges14 bronze badges

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

Comments

hiddenuser.2524 · Accepted Answer · 2020-03-04 10:03:50Z

1

You are appending strings, not React elements. You need to append to an array:

export default function(props) {
  const bookData = props.bookData;
  const pageStart = props.pageStart;
  // Create Diary HTML
  const myLoop = (loopNumber, pageStart) => {
    const elements = [];
    for (let i = 0; i < loopNumber; i++) {
      elements.push(<DiaryByDay loop={i} key={i} />);
    }
    return elements;
  };

  const dayByDayPages = myLoop(3, 3);
  const dayByDayReturn = <> {dayByDayPages} </>;

  return dayByDayReturn;
}

answered Mar 4, 2020 at 10:03

hiddenuser.2524

5,0181 gold badge19 silver badges22 bronze badges

Comments

Ramesh Reddy · Accepted Answer · 2020-03-04 10:10:59Z

1

Change your function so that it returns an array:

 const myLoop = (loopNumber, pageStart) => {
    let html = [];
    for (let i = 0; i < loopNumber; i++) {
      let singleLoop = <DiaryByDay loop={i} />;
      html.push(singleLoop);
    }
    return html;
  };

If you return a huge string obviously it'll try to display the string.

And you should also add a key prop to each DiaryByDay component. Using index value might not be a good idea for that because if you later delete some elements in your array the indexes change.

So let singleLoop = <DiaryByDay loop={i} />;

should be

let singleLoop = <DiaryByDay key={ ...something unique for each element} loop={i} />;

edited Mar 4, 2020 at 10:10

answered Mar 4, 2020 at 10:04

Ramesh Reddy

10.7k3 gold badges22 silver badges38 bronze badges

Comments

Fraction · Accepted Answer · 2020-03-04 10:46:42Z

You must return an array of elements:

const myLoop = (loopNumber, pageStart) => {
  return [...Array(loopNumber).keys()].map(v => <DiaryByDay key={v} loop={v} />);
};

Or

const myLoop = (loopNumber, pageStart) => {
    const html = [];
    for (let i = 0; i < loopNumber; i++) {
      html.push(<DiaryByDay key={i} loop={i} />);
    }
    return html;
  };

Demo:

const Fragment = React.Fragment;

function DiaryByDay(props) {
  return <div>DiaryByDay {props.loop}</div>
}

function App(props) {
  //const bookData = props.bookData;
  //const pageStart = props.pageStart;
  // Create Diary HTML
  const myLoop = (loopNumber, pageStart) => {
    return [...Array(loopNumber).keys()].map(v => <DiaryByDay key={v} loop={v} />);
  };

const dayByDayPages = myLoop(4, 3);
const dayByDayReturn = <Fragment>  {dayByDayPages}  </Fragment>
//console.log(dayByDayReturn)


  return (
    dayByDayReturn
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Sohail Ashraf · Accepted Answer · 2020-03-05 01:52:44Z

1

The React is printing the component as string because you are saving component as string.

You could store the component in array and then render it.

Try this.

export default function(props) {
    const bookData = props.bookData;
    const pageStart = props.pageStart;
    // Create Diary HTML
    const myLoop = (loopNumber, pageStart) => {
      let html = [];
     for (let i = loopNumber; i < pageStart; i++) {
        let singleLoop = <DiaryByDay loop={${i}} />;
        html.push(singleLoop);
      }
      return html;
    };
  const dayByDayPages = myLoop(1, 3);
  const dayByDayReturn = <Fragment> {dayByDayPages}  </Fragment>


    return (
      dayByDayReturn
    );
  }

Codesandbox Example:

edited Mar 5, 2020 at 1:52

answered Mar 4, 2020 at 10:03

Sohail Ashraf

10.7k3 gold badges31 silver badges43 bronze badges

3 Comments

Paul A Over a year ago

THanks - but I tried it and got "ReferenceError: can't access lexical declaration `dayByDayReturn' before initialization"

Paul A Over a year ago

It is still being seen as a text string. The compnent is just rendering "<DiaryByDay loop={0} />" as text on the page

Sohail Ashraf Over a year ago

I have updated the code and added a codeSandbox example too.

Collectives™ on Stack Overflow

Loop components without array

5 Answers 5

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related