React - map array to child component

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>

  );

};

edited Mar 24 at 7:07

kukkuz

29.8k62870

asked Mar 24 at 6:22

noxsta

412

add a comment |

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

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>

  );

};

edited Mar 24 at 7:07

kukkuz

29.8k62870

asked Mar 24 at 6:22

noxsta

412

add a comment |

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

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>

  );

};

edited Mar 24 at 7:07

kukkuz

29.8k62870

asked Mar 24 at 6:22

noxsta

412

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

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

edited Mar 24 at 7:07

kukkuz

29.8k62870

asked Mar 24 at 6:22

noxsta

412

edited Mar 24 at 7:07

kukkuz

29.8k62870

asked Mar 24 at 6:22

noxsta

412

edited Mar 24 at 7:07

kukkuz

29.8k62870

edited Mar 24 at 7:07

kukkuz

29.8k62870

edited Mar 24 at 7:07

kukkuz

29.8k62870

asked Mar 24 at 6:22

noxsta

412

asked Mar 24 at 6:22

noxsta

412

asked Mar 24 at 6:22

noxsta

412

add a comment |

3 Answers
3

active

oldest

votes

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

answered Mar 24 at 7:06

kukkuz

29.8k62870

add a comment |

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

answered Mar 24 at 6:33

Shubham Khatri

95k15121161

add a comment |

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>

  );

};

edited Mar 24 at 6:51

answered Mar 24 at 6:31

Code Maniac

11.1k2733

add a comment |

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

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

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

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

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

answered Mar 24 at 7:06

kukkuz

29.8k62870

add a comment |

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

answered Mar 24 at 7:06

kukkuz

29.8k62870

add a comment |

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

answered Mar 24 at 7:06

kukkuz

29.8k62870

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

answered Mar 24 at 7:06

kukkuz

29.8k62870

answered Mar 24 at 7:06

kukkuz

29.8k62870

answered Mar 24 at 7:06

kukkuz

29.8k62870

answered Mar 24 at 7:06

kukkuz

29.8k62870

add a comment |

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

answered Mar 24 at 6:33

Shubham Khatri

95k15121161

add a comment |

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

answered Mar 24 at 6:33

Shubham Khatri

95k15121161

add a comment |

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

answered Mar 24 at 6:33

Shubham Khatri

95k15121161

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

answered Mar 24 at 6:33

Shubham Khatri

95k15121161

answered Mar 24 at 6:33

Shubham Khatri

95k15121161

answered Mar 24 at 6:33

Shubham Khatri

95k15121161

answered Mar 24 at 6:33

Shubham Khatri

95k15121161

add a comment |

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>

  );

};

edited Mar 24 at 6:51

answered Mar 24 at 6:31

Code Maniac

11.1k2733

add a comment |

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>

  );

};

edited Mar 24 at 6:51

answered Mar 24 at 6:31

Code Maniac

11.1k2733

add a comment |

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>

  );

};

edited Mar 24 at 6:51

answered Mar 24 at 6:31

Code Maniac

11.1k2733

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>

  );

};

edited Mar 24 at 6:51

answered Mar 24 at 6:31

Code Maniac

11.1k2733

edited Mar 24 at 6:51

answered Mar 24 at 6:31

Code Maniac

11.1k2733

answered Mar 24 at 6:31

Code Maniac

11.1k2733

answered Mar 24 at 6:31

Code Maniac

11.1k2733

add a comment |

draft saved

draft discarded

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky