Best way to load dynamically generated JSX with React.js

Question

I have some data returning from an API, and I'm trying to create a template to return a carousel with the images/headers/descriptions already formatted. When I return these, they always have undefined prefixed to them, and they are still strings. I tried using dangerouslySetInnerHTML with String.raw`${x}` , which worked for something else, but this also doesn't render them as proper HTML. I'll paste my code below, any advice or guidance is appreciated.

export function CarouselImages({ projTitle, uid }) {
  const [json, setJson] = useState({});

  useEffect(() => {
    get_slide_data(projTitle).then(setJson).catch(console.error);
  }, [projTitle]);
  console.log(json.TheMovieDBAPI);

  let Indicators = () => {
    let temp;
    for(let i in json.TheMovieDBAPI){
      if(i == 1){
        temp += `<button type="button" data-bs-target=${uid} data-bs-slide-to=${(i-1)} className="active" aria-label=${"Slide " + (i)} aria-current="true"></button>`
      }else{
        temp += `<button type="button" data-bs-target=${uid} data-bs-slide-to=${(i-1)} className="" aria-label=${"Slide " + (i)} aria-current="true"></button>`
      }
    }
    return temp;
  };

  let Slides = () => {
    let temp;
    for(let i in json[projTitle]){
      temp += `<div class="carousel-item active">
                <img src=${i.src} class="d-block">
                <div class="carousel-caption d-none d-md-block">
                  <h5 class="h5">${i.heading}</h5>
                  <p>${i.desc}</p>
                </div>
              </div>`;
    }
    return temp;
  };

  console.log(Indicators);

  return (
    <div className="carousel slide projImg py-2" id={uid} data-bs-ride="carousel">
      <div className="carousel-indicators">
        <Indicators />
      </div>
      <div className="carousel-inner">
        <Slides />
      </div>
    </div>
  )
}

code · Accepted Answer · 2022-08-10 18:02:54Z

1

Well, you're getting undefined because you're trying to access an array of objects instead of an object. Perhaps you're confused for the difference in between JavaScript of and in. Generally speaking, for(... of ...) returns the iterated element, while for(... in ...) returns the index, so if you do:

const arr = [{
  test: 1
}, {
  test: 2
}, {
  test: 3
}];
for (let i in arr) {
  console.log(i.test);
}

then it will output undefined, whilst

const arr = [{
  test: 1
}, {
  test: 2
}, {
  test: 3
}];
for (let i of arr) {
  console.log(i.test);
}

gives the actual object.

In your case, you're getting undefined because you're treating a number as an object. You can instead do:

for(let i of arr) {
  console.log(i);
}

or use the index:

for(let i in arr) {
  console.log(arr[i]);
}

In your case it'd look something like:

let Slides = () => {
  let temp;
  for (let i of json[projTitle]) {
    temp += `<div class="carousel-item active">
               <img src=${i.src} class="d-block">
               <div class="carousel-caption d-none d-md-block">
                 <h5 class="h5">${i.heading}</h5>
                 <p>${i.desc}</p>
               </div>
             </div>`;
  }
  return temp;
};

Update

Because you're operating on objects, if you try for(... of ...) you'll get an "object not iterable" error (because it's not an iterable). To iterate through objects, you would need to use a for(... in ...) loop and access it like an array, e.g.:

for(let i in myObj) {
  // `i` is the object key
  console.log(myObj[i]); // object contents being iterated
}

The exact same applies for your case.

edited Aug 10, 2022 at 18:02

answered Aug 10, 2022 at 0:42

code

6,3994 gold badges22 silver badges47 bronze badges

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

2 Comments

morthemex Over a year ago

This definitely cleared some questions I had up, but unfortunately isn't exactly the answer needed. The react fails to compile when I use of, and it says the object is not iterable. I did have questions about in vs of though, and those are cleared up now, so thanks!

code Over a year ago

@morthemex oh, based on your code I assumed it's an array. I've adjusted my answer.

Collectives™ on Stack Overflow

Best way to load dynamically generated JSX with React.js

1 Answer 1

Update

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related