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>
);
};
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"/>
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>
);
};
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"/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.