CODEWITHSUNDEEP
javascriptreactjs
morthemex
morthemex

Reputation: 5

Best way to load dynamically generated JSX with React.js

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>
  )
}

Upvotes: 0

Views: 247

Answers (1)

code
code

Reputation: 6349

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.

Upvotes: 1

Related Questions