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>
);
})
}
Related
I'm starting to ReactJs and have a doubt when generating a list with an ordering. How do I include a counter inside my map?
The way I'm doing it is repeating the number 1 in all records. I wanted each record to have a counter (1 Adam, 2 Andrew, 3 Sophia ...)
<div>
{
data.contacts.data.map((contact) => {
return (
<div>
<span>1</span> <b>{contact.data.name} {contact.data.email}</b>
</div>
)
})
}
</div>
Use the second argument (array index) of the map method:
<div>
{
data.contacts.data.map((contact, index) => (
<div>
<span>{index + 1}</span> <b>{contact.data.name} {contact.data.email}</b>
</div>
))
}
</div>
With map you have access to the index. So you can use the index to add a counter. Also, remember to add a key-value to each child you're printing with map (you can use the index for this).
<div>
{
data.contacts.data.map((contact, index) => {
return (
<div key={index}>
<span>{index + 1}</span> <b>{contact.data.name} {contact.data.email}</b>
</div>
)
})
}
</div>
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
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>
);
}
This is my render
render() {
let products = this.state.products
return (
<ul>
{products.map((product, index) => Product({ key: index, product: product }))}
</ul>
);
}
I am using a unique key, and still get the warning
Warning: Each child in an array or iterator should have a unique "key"
prop.
That's not how you return a Component or pass it the key prop (or any other props...)
<ul>
{products.map((product, index) => (
<Product key={index} product={product} />
))}
</ul>
https://reactjs.org/docs/components-and-props.html#composing-components
I found this for you.
How to create unique keys for React elements?
It seems like you need to have a return for the key.
Or, as it states, npm packages already exist to declare unique keys.
You are not passing child elements to the ul
render() {
let products = this.state.products
return (
<ul>
{products.map((product, index) =>
<li key={index}>
{product}
</li>}
</ul>
);
}
I'm seeing this:
function Product(props) {
return (
<p key={props.key}>{props.product}</p>
)
}
function Main(props) {
let products = [ "foo", "bar", "baz"];
return (
<ul>
{products.map((product, index) => Product({key: index, product: product }))}
</ul>
);
}
ReactDOM.render(
<Main></Main>,
document.getElementById('example')
);
and this:
function Product(props) {
return (
<p>{props.product}</p>
)
}
function Main(props) {
let products = [ "foo", "bar", "baz"];
return (
<ul>
{products.map((product, index) => (
<li key={index}>
{Product({product: product })}
</li>
))}
</ul>
);
}
ReactDOM.render(
<Main></Main>,
document.getElementById('example')
);
Do what you're trying to accomplish.
If I had to guess (I don't have high confidence in this explanation), I would suspect that React requires a key prop on child components to so that it can quickly determine which elements need to be re-rendered when state changes. Therefore, passing a key prop won't actually achieve anything unless it's actually rendered as UI. The two examples above are rendering keys to the virtual DOM in the <p> and <li> respectively.
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;
}