React - map array to child component












8















I'm coding a site with multiple pages. A page ComponentA, have a child component that return sections with titles and paragraphs.



The array in ComponentA pass data as props to the child. Inside the child, a map function return the paragraphs correct. What's missing for the titles, how would you do to pass title1 to paragraph1, title2 to paragraph2 and so on?



ComponentA:



import Child from "../components/child";

const ComponentA = () => {
<Layout>
<h1>Home Page</h1>
<Child title={info.title} text={info.text} />
</Layout>
}

const info = {
title: ["Title1", "Title2"],
text: ["Paragraph1", "Paragraph2"]
};


Child component:



const Child = ({ text, title }) => {
return (
<div>
{text.map(text => {
return (
<div>
<h3>{title}</h3>
<p>{text}</p>
</div>
);
})}
</div>
);
};









share|improve this question









New contributor




noxsta is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

























    8















    I'm coding a site with multiple pages. A page ComponentA, have a child component that return sections with titles and paragraphs.



    The array in ComponentA pass data as props to the child. Inside the child, a map function return the paragraphs correct. What's missing for the titles, how would you do to pass title1 to paragraph1, title2 to paragraph2 and so on?



    ComponentA:



    import Child from "../components/child";

    const ComponentA = () => {
    <Layout>
    <h1>Home Page</h1>
    <Child title={info.title} text={info.text} />
    </Layout>
    }

    const info = {
    title: ["Title1", "Title2"],
    text: ["Paragraph1", "Paragraph2"]
    };


    Child component:



    const Child = ({ text, title }) => {
    return (
    <div>
    {text.map(text => {
    return (
    <div>
    <h3>{title}</h3>
    <p>{text}</p>
    </div>
    );
    })}
    </div>
    );
    };









    share|improve this question









    New contributor




    noxsta is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.























      8












      8








      8








      I'm coding a site with multiple pages. A page ComponentA, have a child component that return sections with titles and paragraphs.



      The array in ComponentA pass data as props to the child. Inside the child, a map function return the paragraphs correct. What's missing for the titles, how would you do to pass title1 to paragraph1, title2 to paragraph2 and so on?



      ComponentA:



      import Child from "../components/child";

      const ComponentA = () => {
      <Layout>
      <h1>Home Page</h1>
      <Child title={info.title} text={info.text} />
      </Layout>
      }

      const info = {
      title: ["Title1", "Title2"],
      text: ["Paragraph1", "Paragraph2"]
      };


      Child component:



      const Child = ({ text, title }) => {
      return (
      <div>
      {text.map(text => {
      return (
      <div>
      <h3>{title}</h3>
      <p>{text}</p>
      </div>
      );
      })}
      </div>
      );
      };









      share|improve this question









      New contributor




      noxsta is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.












      I'm coding a site with multiple pages. A page ComponentA, have a child component that return sections with titles and paragraphs.



      The array in ComponentA pass data as props to the child. Inside the child, a map function return the paragraphs correct. What's missing for the titles, how would you do to pass title1 to paragraph1, title2 to paragraph2 and so on?



      ComponentA:



      import Child from "../components/child";

      const ComponentA = () => {
      <Layout>
      <h1>Home Page</h1>
      <Child title={info.title} text={info.text} />
      </Layout>
      }

      const info = {
      title: ["Title1", "Title2"],
      text: ["Paragraph1", "Paragraph2"]
      };


      Child component:



      const Child = ({ text, title }) => {
      return (
      <div>
      {text.map(text => {
      return (
      <div>
      <h3>{title}</h3>
      <p>{text}</p>
      </div>
      );
      })}
      </div>
      );
      };






      javascript arrays reactjs






      share|improve this question









      New contributor




      noxsta is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      share|improve this question









      New contributor




      noxsta is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      share|improve this question




      share|improve this question








      edited yesterday









      kukkuz

      28.8k62868




      28.8k62868






      New contributor




      noxsta is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      asked yesterday









      noxstanoxsta

      412




      412




      New contributor




      noxsta is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.





      New contributor





      noxsta is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






      noxsta is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.
























          3 Answers
          3






          active

          oldest

          votes


















          4














          Your info object is not an iterable list - so I would convert them into a list {title, text} like so:



          const data = info.title.map((e,i) => {
          return {title : e, text: info.text[i]}
          })


          Now I would shift the map() function to ComponentA instead of Child as that makes the child component more meaningful.



          See demo below:






          const info = {
          title: ["Title1", "Title2"],
          text: ["Paragraph1", "Paragraph2"]
          };

          const data = info.title.map((e,i) => {
          return {title : e, text: info.text[i]}
          })

          const ComponentA = () => {
          return (
          <div>
          <h1>Home Page</h1>
          { data.map(item => {
          return (
          <Child key={item.title} title={item.title} text={item.text} />
          );
          })
          }
          </div>
          )
          }

          const Child = ({ text, title }) => {
          return (
          <div>
          <h3>{title}</h3>
          <p>{text}</p>
          </div>
          );
          };

          ReactDOM.render(
          <ComponentA/>,
          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"/>








          share|improve this answer































            1














            You can iterate over text and usnig index access the title






            const ComponentA = () => {
            return (
            <div>
            <h1>Home Page</h1>
            <Child title={info.title} text={info.text} />
            </div>
            )
            }

            const info = {
            title: ["Title1", "Title2"],
            text: ["Paragraph1", "Paragraph2"]
            };

            const Child = ({ text, title }) => {
            return (
            <div>
            {text.map((text1, index) => {
            return (
            <div>
            <h3>{title[index]}</h3>
            <p>{text1}</p>
            </div>
            );
            })}
            </div>
            );
            };

            ReactDOM.render(<ComponentA />, document.getElementById('app'));

            <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="app"/>








            share|improve this answer































              1














              You can change your children component like this, since text is an array so you need to access it values by index.



              const Child = ({ text, title }) => {
              return (
              <div>
              {text.map((text,index) => {
              return (
              <div>
              <h3>{title[index]}</h3>
              <p>{text}</p>
              </div>
              );
              })}
              </div>
              );
              };


              You can even change you parent component to something like this



              import Child from "../components/child";

              const ComponentA = () => {
              <Layout>
              <h1>Home Page</h1>
              {info.text.map((text,index)=> <Child title={info.title[index]} text={text} />}
              </Layout>
              }

              const info = {
              title: ["Title1", "Title2"],
              text: ["Paragraph1", "Paragraph2"]
              };


              And then your child should be



              const Child = ({ text, title }) => {
              return (
              <div>
              <h3>{title}</h3>
              <p>{text}</p>
              </div>
              );
              };





              share|improve this answer

























                Your Answer






                StackExchange.ifUsing("editor", function () {
                StackExchange.using("externalEditor", function () {
                StackExchange.using("snippets", function () {
                StackExchange.snippets.init();
                });
                });
                }, "code-snippets");

                StackExchange.ready(function() {
                var channelOptions = {
                tags: "".split(" "),
                id: "1"
                };
                initTagRenderer("".split(" "), "".split(" "), channelOptions);

                StackExchange.using("externalEditor", function() {
                // Have to fire editor after snippets, if snippets enabled
                if (StackExchange.settings.snippets.snippetsEnabled) {
                StackExchange.using("snippets", function() {
                createEditor();
                });
                }
                else {
                createEditor();
                }
                });

                function createEditor() {
                StackExchange.prepareEditor({
                heartbeatType: 'answer',
                autoActivateHeartbeat: false,
                convertImagesToLinks: true,
                noModals: true,
                showLowRepImageUploadWarning: true,
                reputationToPostImages: 10,
                bindNavPrevention: true,
                postfix: "",
                imageUploader: {
                brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
                contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
                allowUrls: true
                },
                onDemand: true,
                discardSelector: ".discard-answer"
                ,immediatelyShowMarkdownHelp:true
                });


                }
                });






                noxsta is a new contributor. Be nice, and check out our Code of Conduct.










                draft saved

                draft discarded


















                StackExchange.ready(
                function () {
                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55321253%2freact-map-array-to-child-component%23new-answer', 'question_page');
                }
                );

                Post as a guest















                Required, but never shown

























                3 Answers
                3






                active

                oldest

                votes








                3 Answers
                3






                active

                oldest

                votes









                active

                oldest

                votes






                active

                oldest

                votes









                4














                Your info object is not an iterable list - so I would convert them into a list {title, text} like so:



                const data = info.title.map((e,i) => {
                return {title : e, text: info.text[i]}
                })


                Now I would shift the map() function to ComponentA instead of Child as that makes the child component more meaningful.



                See demo below:






                const info = {
                title: ["Title1", "Title2"],
                text: ["Paragraph1", "Paragraph2"]
                };

                const data = info.title.map((e,i) => {
                return {title : e, text: info.text[i]}
                })

                const ComponentA = () => {
                return (
                <div>
                <h1>Home Page</h1>
                { data.map(item => {
                return (
                <Child key={item.title} title={item.title} text={item.text} />
                );
                })
                }
                </div>
                )
                }

                const Child = ({ text, title }) => {
                return (
                <div>
                <h3>{title}</h3>
                <p>{text}</p>
                </div>
                );
                };

                ReactDOM.render(
                <ComponentA/>,
                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"/>








                share|improve this answer




























                  4














                  Your info object is not an iterable list - so I would convert them into a list {title, text} like so:



                  const data = info.title.map((e,i) => {
                  return {title : e, text: info.text[i]}
                  })


                  Now I would shift the map() function to ComponentA instead of Child as that makes the child component more meaningful.



                  See demo below:






                  const info = {
                  title: ["Title1", "Title2"],
                  text: ["Paragraph1", "Paragraph2"]
                  };

                  const data = info.title.map((e,i) => {
                  return {title : e, text: info.text[i]}
                  })

                  const ComponentA = () => {
                  return (
                  <div>
                  <h1>Home Page</h1>
                  { data.map(item => {
                  return (
                  <Child key={item.title} title={item.title} text={item.text} />
                  );
                  })
                  }
                  </div>
                  )
                  }

                  const Child = ({ text, title }) => {
                  return (
                  <div>
                  <h3>{title}</h3>
                  <p>{text}</p>
                  </div>
                  );
                  };

                  ReactDOM.render(
                  <ComponentA/>,
                  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"/>








                  share|improve this answer


























                    4












                    4








                    4







                    Your info object is not an iterable list - so I would convert them into a list {title, text} like so:



                    const data = info.title.map((e,i) => {
                    return {title : e, text: info.text[i]}
                    })


                    Now I would shift the map() function to ComponentA instead of Child as that makes the child component more meaningful.



                    See demo below:






                    const info = {
                    title: ["Title1", "Title2"],
                    text: ["Paragraph1", "Paragraph2"]
                    };

                    const data = info.title.map((e,i) => {
                    return {title : e, text: info.text[i]}
                    })

                    const ComponentA = () => {
                    return (
                    <div>
                    <h1>Home Page</h1>
                    { data.map(item => {
                    return (
                    <Child key={item.title} title={item.title} text={item.text} />
                    );
                    })
                    }
                    </div>
                    )
                    }

                    const Child = ({ text, title }) => {
                    return (
                    <div>
                    <h3>{title}</h3>
                    <p>{text}</p>
                    </div>
                    );
                    };

                    ReactDOM.render(
                    <ComponentA/>,
                    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"/>








                    share|improve this answer













                    Your info object is not an iterable list - so I would convert them into a list {title, text} like so:



                    const data = info.title.map((e,i) => {
                    return {title : e, text: info.text[i]}
                    })


                    Now I would shift the map() function to ComponentA instead of Child as that makes the child component more meaningful.



                    See demo below:






                    const info = {
                    title: ["Title1", "Title2"],
                    text: ["Paragraph1", "Paragraph2"]
                    };

                    const data = info.title.map((e,i) => {
                    return {title : e, text: info.text[i]}
                    })

                    const ComponentA = () => {
                    return (
                    <div>
                    <h1>Home Page</h1>
                    { data.map(item => {
                    return (
                    <Child key={item.title} title={item.title} text={item.text} />
                    );
                    })
                    }
                    </div>
                    )
                    }

                    const Child = ({ text, title }) => {
                    return (
                    <div>
                    <h3>{title}</h3>
                    <p>{text}</p>
                    </div>
                    );
                    };

                    ReactDOM.render(
                    <ComponentA/>,
                    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"/>








                    const info = {
                    title: ["Title1", "Title2"],
                    text: ["Paragraph1", "Paragraph2"]
                    };

                    const data = info.title.map((e,i) => {
                    return {title : e, text: info.text[i]}
                    })

                    const ComponentA = () => {
                    return (
                    <div>
                    <h1>Home Page</h1>
                    { data.map(item => {
                    return (
                    <Child key={item.title} title={item.title} text={item.text} />
                    );
                    })
                    }
                    </div>
                    )
                    }

                    const Child = ({ text, title }) => {
                    return (
                    <div>
                    <h3>{title}</h3>
                    <p>{text}</p>
                    </div>
                    );
                    };

                    ReactDOM.render(
                    <ComponentA/>,
                    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"/>





                    const info = {
                    title: ["Title1", "Title2"],
                    text: ["Paragraph1", "Paragraph2"]
                    };

                    const data = info.title.map((e,i) => {
                    return {title : e, text: info.text[i]}
                    })

                    const ComponentA = () => {
                    return (
                    <div>
                    <h1>Home Page</h1>
                    { data.map(item => {
                    return (
                    <Child key={item.title} title={item.title} text={item.text} />
                    );
                    })
                    }
                    </div>
                    )
                    }

                    const Child = ({ text, title }) => {
                    return (
                    <div>
                    <h3>{title}</h3>
                    <p>{text}</p>
                    </div>
                    );
                    };

                    ReactDOM.render(
                    <ComponentA/>,
                    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"/>






                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered yesterday









                    kukkuzkukkuz

                    28.8k62868




                    28.8k62868

























                        1














                        You can iterate over text and usnig index access the title






                        const ComponentA = () => {
                        return (
                        <div>
                        <h1>Home Page</h1>
                        <Child title={info.title} text={info.text} />
                        </div>
                        )
                        }

                        const info = {
                        title: ["Title1", "Title2"],
                        text: ["Paragraph1", "Paragraph2"]
                        };

                        const Child = ({ text, title }) => {
                        return (
                        <div>
                        {text.map((text1, index) => {
                        return (
                        <div>
                        <h3>{title[index]}</h3>
                        <p>{text1}</p>
                        </div>
                        );
                        })}
                        </div>
                        );
                        };

                        ReactDOM.render(<ComponentA />, document.getElementById('app'));

                        <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="app"/>








                        share|improve this answer




























                          1














                          You can iterate over text and usnig index access the title






                          const ComponentA = () => {
                          return (
                          <div>
                          <h1>Home Page</h1>
                          <Child title={info.title} text={info.text} />
                          </div>
                          )
                          }

                          const info = {
                          title: ["Title1", "Title2"],
                          text: ["Paragraph1", "Paragraph2"]
                          };

                          const Child = ({ text, title }) => {
                          return (
                          <div>
                          {text.map((text1, index) => {
                          return (
                          <div>
                          <h3>{title[index]}</h3>
                          <p>{text1}</p>
                          </div>
                          );
                          })}
                          </div>
                          );
                          };

                          ReactDOM.render(<ComponentA />, document.getElementById('app'));

                          <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="app"/>








                          share|improve this answer


























                            1












                            1








                            1







                            You can iterate over text and usnig index access the title






                            const ComponentA = () => {
                            return (
                            <div>
                            <h1>Home Page</h1>
                            <Child title={info.title} text={info.text} />
                            </div>
                            )
                            }

                            const info = {
                            title: ["Title1", "Title2"],
                            text: ["Paragraph1", "Paragraph2"]
                            };

                            const Child = ({ text, title }) => {
                            return (
                            <div>
                            {text.map((text1, index) => {
                            return (
                            <div>
                            <h3>{title[index]}</h3>
                            <p>{text1}</p>
                            </div>
                            );
                            })}
                            </div>
                            );
                            };

                            ReactDOM.render(<ComponentA />, document.getElementById('app'));

                            <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="app"/>








                            share|improve this answer













                            You can iterate over text and usnig index access the title






                            const ComponentA = () => {
                            return (
                            <div>
                            <h1>Home Page</h1>
                            <Child title={info.title} text={info.text} />
                            </div>
                            )
                            }

                            const info = {
                            title: ["Title1", "Title2"],
                            text: ["Paragraph1", "Paragraph2"]
                            };

                            const Child = ({ text, title }) => {
                            return (
                            <div>
                            {text.map((text1, index) => {
                            return (
                            <div>
                            <h3>{title[index]}</h3>
                            <p>{text1}</p>
                            </div>
                            );
                            })}
                            </div>
                            );
                            };

                            ReactDOM.render(<ComponentA />, document.getElementById('app'));

                            <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="app"/>








                            const ComponentA = () => {
                            return (
                            <div>
                            <h1>Home Page</h1>
                            <Child title={info.title} text={info.text} />
                            </div>
                            )
                            }

                            const info = {
                            title: ["Title1", "Title2"],
                            text: ["Paragraph1", "Paragraph2"]
                            };

                            const Child = ({ text, title }) => {
                            return (
                            <div>
                            {text.map((text1, index) => {
                            return (
                            <div>
                            <h3>{title[index]}</h3>
                            <p>{text1}</p>
                            </div>
                            );
                            })}
                            </div>
                            );
                            };

                            ReactDOM.render(<ComponentA />, document.getElementById('app'));

                            <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="app"/>





                            const ComponentA = () => {
                            return (
                            <div>
                            <h1>Home Page</h1>
                            <Child title={info.title} text={info.text} />
                            </div>
                            )
                            }

                            const info = {
                            title: ["Title1", "Title2"],
                            text: ["Paragraph1", "Paragraph2"]
                            };

                            const Child = ({ text, title }) => {
                            return (
                            <div>
                            {text.map((text1, index) => {
                            return (
                            <div>
                            <h3>{title[index]}</h3>
                            <p>{text1}</p>
                            </div>
                            );
                            })}
                            </div>
                            );
                            };

                            ReactDOM.render(<ComponentA />, document.getElementById('app'));

                            <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="app"/>






                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered yesterday









                            Shubham KhatriShubham Khatri

                            93.2k15117158




                            93.2k15117158























                                1














                                You can change your children component like this, since text is an array so you need to access it values by index.



                                const Child = ({ text, title }) => {
                                return (
                                <div>
                                {text.map((text,index) => {
                                return (
                                <div>
                                <h3>{title[index]}</h3>
                                <p>{text}</p>
                                </div>
                                );
                                })}
                                </div>
                                );
                                };


                                You can even change you parent component to something like this



                                import Child from "../components/child";

                                const ComponentA = () => {
                                <Layout>
                                <h1>Home Page</h1>
                                {info.text.map((text,index)=> <Child title={info.title[index]} text={text} />}
                                </Layout>
                                }

                                const info = {
                                title: ["Title1", "Title2"],
                                text: ["Paragraph1", "Paragraph2"]
                                };


                                And then your child should be



                                const Child = ({ text, title }) => {
                                return (
                                <div>
                                <h3>{title}</h3>
                                <p>{text}</p>
                                </div>
                                );
                                };





                                share|improve this answer






























                                  1














                                  You can change your children component like this, since text is an array so you need to access it values by index.



                                  const Child = ({ text, title }) => {
                                  return (
                                  <div>
                                  {text.map((text,index) => {
                                  return (
                                  <div>
                                  <h3>{title[index]}</h3>
                                  <p>{text}</p>
                                  </div>
                                  );
                                  })}
                                  </div>
                                  );
                                  };


                                  You can even change you parent component to something like this



                                  import Child from "../components/child";

                                  const ComponentA = () => {
                                  <Layout>
                                  <h1>Home Page</h1>
                                  {info.text.map((text,index)=> <Child title={info.title[index]} text={text} />}
                                  </Layout>
                                  }

                                  const info = {
                                  title: ["Title1", "Title2"],
                                  text: ["Paragraph1", "Paragraph2"]
                                  };


                                  And then your child should be



                                  const Child = ({ text, title }) => {
                                  return (
                                  <div>
                                  <h3>{title}</h3>
                                  <p>{text}</p>
                                  </div>
                                  );
                                  };





                                  share|improve this answer




























                                    1












                                    1








                                    1







                                    You can change your children component like this, since text is an array so you need to access it values by index.



                                    const Child = ({ text, title }) => {
                                    return (
                                    <div>
                                    {text.map((text,index) => {
                                    return (
                                    <div>
                                    <h3>{title[index]}</h3>
                                    <p>{text}</p>
                                    </div>
                                    );
                                    })}
                                    </div>
                                    );
                                    };


                                    You can even change you parent component to something like this



                                    import Child from "../components/child";

                                    const ComponentA = () => {
                                    <Layout>
                                    <h1>Home Page</h1>
                                    {info.text.map((text,index)=> <Child title={info.title[index]} text={text} />}
                                    </Layout>
                                    }

                                    const info = {
                                    title: ["Title1", "Title2"],
                                    text: ["Paragraph1", "Paragraph2"]
                                    };


                                    And then your child should be



                                    const Child = ({ text, title }) => {
                                    return (
                                    <div>
                                    <h3>{title}</h3>
                                    <p>{text}</p>
                                    </div>
                                    );
                                    };





                                    share|improve this answer















                                    You can change your children component like this, since text is an array so you need to access it values by index.



                                    const Child = ({ text, title }) => {
                                    return (
                                    <div>
                                    {text.map((text,index) => {
                                    return (
                                    <div>
                                    <h3>{title[index]}</h3>
                                    <p>{text}</p>
                                    </div>
                                    );
                                    })}
                                    </div>
                                    );
                                    };


                                    You can even change you parent component to something like this



                                    import Child from "../components/child";

                                    const ComponentA = () => {
                                    <Layout>
                                    <h1>Home Page</h1>
                                    {info.text.map((text,index)=> <Child title={info.title[index]} text={text} />}
                                    </Layout>
                                    }

                                    const info = {
                                    title: ["Title1", "Title2"],
                                    text: ["Paragraph1", "Paragraph2"]
                                    };


                                    And then your child should be



                                    const Child = ({ text, title }) => {
                                    return (
                                    <div>
                                    <h3>{title}</h3>
                                    <p>{text}</p>
                                    </div>
                                    );
                                    };






                                    share|improve this answer














                                    share|improve this answer



                                    share|improve this answer








                                    edited yesterday

























                                    answered yesterday









                                    Code ManiacCode Maniac

                                    10.6k2733




                                    10.6k2733






















                                        noxsta is a new contributor. Be nice, and check out our Code of Conduct.










                                        draft saved

                                        draft discarded


















                                        noxsta is a new contributor. Be nice, and check out our Code of Conduct.













                                        noxsta is a new contributor. Be nice, and check out our Code of Conduct.












                                        noxsta is a new contributor. Be nice, and check out our Code of Conduct.
















                                        Thanks for contributing an answer to Stack Overflow!


                                        • Please be sure to answer the question. Provide details and share your research!

                                        But avoid



                                        • Asking for help, clarification, or responding to other answers.

                                        • Making statements based on opinion; back them up with references or personal experience.


                                        To learn more, see our tips on writing great answers.




                                        draft saved


                                        draft discarded














                                        StackExchange.ready(
                                        function () {
                                        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55321253%2freact-map-array-to-child-component%23new-answer', 'question_page');
                                        }
                                        );

                                        Post as a guest















                                        Required, but never shown





















































                                        Required, but never shown














                                        Required, but never shown












                                        Required, but never shown







                                        Required, but never shown

































                                        Required, but never shown














                                        Required, but never shown












                                        Required, but never shown







                                        Required, but never shown







                                        Popular posts from this blog

                                        How did Captain America manage to do this?

                                        迪纳利

                                        南乌拉尔铁路局