I have an array of string arrays like,
items : [a[],b[],c[],d[]].
I want to render the elements of this array as a carousel using React. The following code doesn't work. Any help would be appreciated.
public render(): React.ReactElement<IReactCarouselProps> {
return (
<div>
<Carousel>
{this.state.items.map((list,key) => {
return(
<div key = 'key'>
<div>{list.a}</div>
</div>
);
}
)}
</Carousel>
</div>
);
}
working example https://jsfiddle.net/shuts13/cfLxrn15/6/
render() {
return (
<div>
{this.state.items.map((subArray, index) => {
return (
<div key={index}>
{subArray.map((subitem, i) => {
return (
<ul>
<li>{subitem.value}</li>
</ul>
);
})}
</div>
);
})}
</div>
);
}
To render a array of arrays you can map the second array too. This way your code will loop the parent array and loop all the child arrays, rendering them the way you want.
Here is a example:
public render(): React.ReactElement {
const flatArray = parentArray.map(
(childArray) => {(childArray.map((childElement) => <div>Your code here</div>)})
);
return (
{flatArray}
);
}
or, even better, you can use array flat.function(), like this:
public render(): React.ReactElement {
const flatArray = parentArray.flat().map((childElement) => <div>Your code here</div>)
return (
{flatArray}
);
}
Read more about array.flat() method here: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/flat
Related
I have an Array of Objects, and those objects have an object with an array in it. I want to map the "shoot: Array(6)" so I can list out the items.
How would I go about this? Im able to map the name, id, and instructions, but im having trouble getting access to and mapping the shots object then shoot array.
Current Code Information:
{Object.values(instructions).map(({id, name, Instructions}, i) => {
return (
<div key={id}>
<p><b>{name}</b></p>
<p>{Instructions}</p>
</div>
);
})}
You can map on the shoots array within each object like this:
{Object.values(instructions).map(({id, name, Instructions}, i) => {
return (
<div key={id}>
<p><b>{name}</b></p>
<p>{Instructions}</p>
{shoot.shoots.map(shoot => (<p>{shoot}</p>))}
</div>
);
})}
try this code:
{Object.values(instructions).map(({id, name, instructions, shots}, i) => {
return (
<div key={id}>
<p><b>{name}</b></p>
<p>{instructions}</p>
<p>{shots.amount}</p>
{shots.shoot.map(item => (
<div>{item}</div>
))}
</div>
);
})}
Destruct the Shots object along with {id, name, Instructions} and map the shoots array from the Shots object.
{
Object.values(instructions).map(({id, name, Instructions, Shots}, i) => {
return (
<div key={id}>
<p><b>{name}</b></p>
<p>{Instructions}</p>
{
Shots.shoots.map(shoot => (<p>{shoot}</p>))
}
</div>
);
})
}
React newbie here. I have a component which gets an array of objects in JSON format and saves it into the state.
I am now unsure how I can render the name/description of only the 3rd object in the components render function.
I want to be able to only render the 1,2,3,4,5th object etc as well.
Any ideas?
https://codesandbox.io/s/admiring-ishizaka-rfp3k - Demo
return (
<div className="App">
{name1} // Object 1 name
{description1} // Object 1 description
{name2} // Object 2 name
{description2} // Object 2 description
</div>
);
To give you the basic idea, you can display the name of your 3rd component on your render like this:
render() {
return (
<div className="App">
{this.state.profiles.map((item, index) => {
return(
index === 2 ? item.name : ""
)
})}
</div>
);
}
Please use Array map
render() {
const { profiles } = this.state;
return (
<div className="App">
{
profiles.map(profile => (
{profile.name}
{profile.description}
))
}
</div>
);
}
render() {
return (
<div className="App">
{this.state.profiles.map((data, i) => {
return(
i=== 2 ? (<p>{data.name}</p>) :(<p> </p>)
)
})}
</div>
);
}
I am trying to loop through object of objects and using map to list the item and I am getting this object from redux. I can console.log the value but jsx returns nothing. I tried removing {} and return and using () only but still it is not rendering anything.
My posts object looks like
posts = { 1: {id: 1, title: "Hello world"} }
Component.js
renderList(){
const { posts } = this.props;
Object.keys(posts).map(key => {
console.log(`${key} and ${posts[key].title}`);
return (
<li key={key} className="list-group-item">
{posts[key].title}
</li>
);
});
}
render(){
return (
<div>
<h2>Posts</h2>
<ul className="list-group">{this.renderList()}</ul>
</div>
);
}
I can't figure out what I am doing wrong.
Your renderList method does not have a return statement.
Depending on if your version of React you can either return an array here or you need to wrap it in a div (or in this case put the ul into it).
renderListOnReact16(){
const { posts } = this.props;
return Object.keys(posts).map(key => {
console.log(`${key} and ${posts[key].title}`);
return (
<li key={key} className="list-group-item">
{posts[key].title}
</li>
);
});
}
renderOnReact16(){
return (
<div>
<h2>Posts</h2>
<ul className="list-group">{this.renderList()}</ul>
</div>
);
}
renderListOnReact15(){
const { posts } = this.props;
return (
<ul className="list-group">
{Object.keys(posts).map(key => {
console.log(`${key} and ${posts[key].title}`);
return (
<li key={key} className="list-group-item">
{posts[key].title}
</li>
);
})}
);
}
renderOnReact16(){
return (
<div>
<h2>Posts</h2>
{this.renderList()}
</div>
);
}
I'm trying to render an array of messages but would want it to render differently by class given a condition my code looks like this:
render() {
return (
<div>
{this.props.messages.map((m, index) => (
//if m.id === 1 render this:
<p className={someClass1}>Hello, {m.message}!</p>
//else render this:
<p className={someClass2}>Hi, {m.message}!</p>
))}
</div>);
}
you can easily add logic to your map. you just need the contents to not be an inline return of a react component.
render() {
return (
<div>
{this.props.messages.map((m, index) => {
if (m.id === 1){
return <p className={someClass1}>Hello, {m.message}!</p>
}
return <p className={someClass2}>Hi, {m.message}!</p>
})}
</div>
);
}
You can also do the same thing with a forEach outside of the return on your render like so
render() {
const elems = [];
this.props.messages.forEach( (m, index) => {
if (m.id === 1) {
elems.push(<p className={someClass1}>Hello, {m.message}!</p>);
} else {
elems.push(<p className={someClass2}>Hi, {m.message}!</p>);
}
return (
<div>
{elems}
</div>
);
}
React group 4 items in a div with class row. At the moment you can see below I have a <div> group around the articles.
// articles is array of article object
<div className="row">
<section className="section--6-or-4-items section-featured campaign-teasers">
{articles.map(item => <Teaser {...item} key={item.id} />)}
</section>
</div>
Should I create a new component which have <div> wrapper around and only accept 4 arrays at a time to render out the articles.
Your best bet here is to build your array of articles into an array of 4-length arrays. You can do this using lodash's handy chunk method.
Once you've chunked your articles, you can iterate over them in your JSX, something like this:
const sections = chunk(articles, 4);
return (
<div className="row">
{sections.map((articles, i) => (
<section className="..." key={i}>
{articles.map(item => <Teaser {...item} key={item.id} />)}
</section>
)}
</div>
);
Edit: If you don't want to use lodash, you can use reduce to great effect:
function chunk(array, size) {
return array.reduce((chunks, item, i) => {
if (i % size === 0) {
chunks.push([item]);
} else {
chunks[chunks.length - 1].push(item);
}
return chunks;
}, []);
}
Personally, I extract rendering to dedicated methods.
<div className="row">
<section className="section--6-or-4-items section-featured campaign-teasers">
{ this.renderArticles() }
</section>
</div>
Renderer method here...
renderArticles() {
return createChunks(articles, 4).map((chunk, idx) => (
<div key={idx}>
{ chunk.map((props, idx) => <Teaser key={idx} {...props} />) }
</div>
));
},
And finally, function which chunks array into smaller array on N size
const createChunks = (array, size) => {
const copy = array.concat();
const chunks = [];
while (copy.length) {
chunks.push( copy.splice(0, size) );
}
return chunks;
}