title: What is the right way to pass nested objects in object array in React?
body: <p>In my map function below I am trying to access the nested objects in my data. I would like to say that &quot;If an object in my SlideData has the property &quot;list&quot;, display it&quot;. I am passing props from the data to my TextSlide component, but there must be a better way than passing a ton of props to the TextComponent?</p>
  <pre><code>function Slideshow(props) {
  
  //MY DATA
  const SlideData = [{
  {
      title: &quot;The Title&quot;,
      text1: &quot;Monkey&quot;,
      text2: &quot;D&quot;,
      text3: &quot;Luffy&quot;,
      list: [
              {
                listTitle: &quot;The List&quot;,
                listItem1: &quot;Zoro&quot;,
                listItem2: &quot;Nami&quot;,
                listItem3: &quot;Sanji&quot;,
                listItem4: &quot;Ussop&quot;,
                listItem5: &quot;Chopper&quot;,
                listItem6: &quot;Franky&quot;,
              },
            ],
      imagesrc: picture,
      imagewidth: &quot;100px&quot;,
    },
  }]
  </code></pre>
  <pre><code>//MAP THROUGH DATA (is there a better way to pass multiple props here?? maybe with {...props} ?)
  
  const textSlides = SlideData.map((item),index) =&gt; ( &lt;TextSlide
        key={index}
        title={item.title}
        text1={item.text1}
        text2={item.text2}
        listTitle={item.listTitle}
        listItem1={item.listItem1}
        listItem2={item.listItem2}
        listItem3={item.listItem3}
        listItem4={item.listItem4}
        listItem5={item.listItem5}
        listItem6={item.listItem6}
    /&gt;));
  
  return (
      &lt;&gt;
          {textSlides}
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>//TEXTSLIDE COMPONENT//</p>
  <pre><code>const TextSlide = (props) =&gt; {
    return (
      &lt;&gt;
        &lt;div className=&quot;slide&quot;&gt;
          &lt;div className=&quot;standard-grid&quot;&gt;
            &lt;span className=&quot;slide-title title&quot;&gt;{props.title}&lt;/span&gt;
               &lt;div className=&quot;content&quot;&gt;
                 &lt;p&gt;{props.text1}&lt;/p&gt;      
                 &lt;p&gt;{props.text2}&lt;/p&gt;         
                 &lt;p&gt;{props.text3}&lt;/p&gt;       
                 {props.list ? &lt;div&gt;
                  &lt;h4&gt;{props.list2}&lt;/h4&gt;
                  &lt;ul&gt;
                    &lt;li&gt;{props.listItem1}&lt;/li&gt;
                    &lt;li&gt;{props.listItem2}&lt;/li&gt;
                    &lt;li&gt;{props.listItem3}&lt;/li&gt;
                    &lt;li&gt;{props.listItem4}&lt;/li&gt;
                    &lt;li&gt;{props.listItem5}&lt;/li&gt;
                    &lt;li&gt;{props.listItem6}&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt; : null} 
               &lt;/div&gt;
              {props.imagesrc ? (&lt;img className=&quot;picture&quot; src={props.imagesrc} 
              style={{ maxWidth: props.imagewidth }} alt=&quot;image&quot; /&gt;) : null}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  
  export default TextSlide;
  </code></pre>