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>
);
};
javascript arrays reactjs
edited Mar 24 at 7:07
kukkuz
29.6k62870
asked Mar 24 at 6:22
noxstanoxsta
412
add a comment |
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>
);
};
javascript arrays reactjs
edited Mar 24 at 7:07
kukkuz
29.6k62870
asked Mar 24 at 6:22
noxstanoxsta
412
add a comment |
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>
);
};
javascript arrays reactjs
edited Mar 24 at 7:07
kukkuz
29.6k62870
asked Mar 24 at 6:22
noxstanoxsta
412
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
javascript arrays reactjs
edited Mar 24 at 7:07
kukkuz
29.6k62870
asked Mar 24 at 6:22
noxstanoxsta
412
edited Mar 24 at 7:07
kukkuz
29.6k62870
asked Mar 24 at 6:22
noxstanoxsta
412
edited Mar 24 at 7:07
kukkuz
29.6k62870
edited Mar 24 at 7:07
kukkuz
29.6k62870
edited Mar 24 at 7:07
kukkuz
29.6k62870
29.6k62870
asked Mar 24 at 6:22
noxstanoxsta
412
asked Mar 24 at 6:22
noxstanoxsta
412
asked Mar 24 at 6:22
noxstanoxsta
412
412
add a comment |
add a comment |
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"/>answered Mar 24 at 7:06
kukkuzkukkuz
29.6k62870
add a comment |
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"/>answered Mar 24 at 6:33
Shubham KhatriShubham Khatri
94.6k15119160
add a comment |
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>
);
};
answered Mar 24 at 6:31
Code ManiacCode Maniac
11k2733
add a comment |
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
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"/>answered Mar 24 at 7:06
kukkuzkukkuz
29.6k62870
add a comment |
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"/>answered Mar 24 at 7:06
kukkuzkukkuz
29.6k62870
add a comment |
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"/>answered Mar 24 at 7:06
kukkuzkukkuz
29.6k62870
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
kukkuzkukkuz
29.6k62870
answered Mar 24 at 7:06
kukkuzkukkuz
29.6k62870
answered Mar 24 at 7:06
kukkuzkukkuz
29.6k62870
answered Mar 24 at 7:06
kukkuzkukkuz
29.6k62870
29.6k62870
add a comment |
add a comment |
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"/>answered Mar 24 at 6:33
Shubham KhatriShubham Khatri
94.6k15119160
add a comment |
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"/>answered Mar 24 at 6:33
Shubham KhatriShubham Khatri
94.6k15119160
add a comment |
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"/>answered Mar 24 at 6:33
Shubham KhatriShubham Khatri
94.6k15119160
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 KhatriShubham Khatri
94.6k15119160
answered Mar 24 at 6:33
Shubham KhatriShubham Khatri
94.6k15119160
answered Mar 24 at 6:33
Shubham KhatriShubham Khatri
94.6k15119160
answered Mar 24 at 6:33
Shubham KhatriShubham Khatri
94.6k15119160
94.6k15119160
add a comment |
add a comment |
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>
);
};
answered Mar 24 at 6:31
Code ManiacCode Maniac
11k2733
add a comment |
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>
);
};
answered Mar 24 at 6:31
Code ManiacCode Maniac
11k2733
add a comment |
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>
);
};
answered Mar 24 at 6:31
Code ManiacCode Maniac
11k2733
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>
);
};
answered Mar 24 at 6:31
Code ManiacCode Maniac
11k2733
edited Mar 24 at 6:51
answered Mar 24 at 6:31
Code ManiacCode Maniac
11k2733
answered Mar 24 at 6:31
Code ManiacCode Maniac
11k2733
answered Mar 24 at 6:31
Code ManiacCode Maniac
11k2733
11k2733
add a comment |
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
