How can I get the passed in object course along with the id key using destructuring the argument as in following code snippet ?
...
return (
<div>
{course.map(course => {
return <Course key={course.id} course={course} />;
})}
</div>
);
For instance I've tried like(see below) this, but its not valid
...
return (
<div>
{course.map(({id} = course) => {
return <Course key={id} course={course} />;
})}
</div>
);
The object for reference
const course = [
{
name: "Half Stack application development",
id: 1
},
{
name: "Node.js",
id: 2
}
Are there any way to do this or is it not possible yet?
Destructure id and spread the rest
course.map( ({ id, ...item }) => (
<div id={id}> {item.foo} </div>
))
You can't destruct an object into its an element and itself.
It could be better destruct item in the callback function like below.
console.log('-------Only get rest obj------');
const courses = [{ name: "Half Stack application development", id: 1 }, { name: "Node.js", id: 2 }];
courses.forEach(({id, ...item}) => console.log('rest obj:', item));
console.log('----Get full obj and destruct---------');
courses.forEach(item => {
const { id } = item;
console.log('id:', id);
console.log('item:', item);
});
return (
<div>
{course.map(item => {
return <Course key={item.id} course={item} />;
})}
</div>
);
You are trying to use the course variable again inside map function.
Rename outer most variable from course to courses.
return (
<div>
{courses.map(course => {
return <Course key={course.id} course={course} />;
})}
</div>
);
Consider below example
return (
<div>
{course.map(({ id, ...course }) => {
return <Course key={id} course={course} />;
})}
</div>
);
It does gets us the id but course object does have all the keys of the original object(ie, it doesn't have the id now).
Related
I would like to delete selected item from list.
When I click on delete the right item get deleted from the list content but on UI I get always the list item fired.
I seems to keep track of JSX keys and show last values.
Here's a demo
const Holidays = (props) => {
console.log(props);
const [state, setState] = useState({ ...props });
useEffect(() => {
setState(props);
console.log(state);
}, []);
const addNewHoliday = () => {
const obj = { start: "12/12", end: "12/13" };
setState(update(state, { daysOffList: { $push: [obj] } }));
};
const deleteHoliday = (i) => {
const objects = state.daysOffList.filter((elm, index) => index != i);
console.log({ objects });
setState(update(state, { daysOffList: { $set: objects } }));
console.log(state.daysOffList);
};
return (
<>
<Header as="h1" content="Select Holidays" />
<Button
primary
icon={<AddIcon />}
text
content="Add new holidays"
onClick={() => addNewHoliday(state)}
/>
{state?.daysOffList?.map((elm, i) => {
console.log(elm.end);
return (
<Flex key={i.toString()} gap="gap.small">
<>
<Header as="h5" content="Start Date" />
<Datepicker
defaultSelectedDate={
new Date(`${elm.start}/${new Date().getFullYear()}`)
}
/>
</>
<>
<Header as="h5" content="End Date" />
<Datepicker
defaultSelectedDate={
new Date(`${elm.end}/${new Date().getFullYear()}`)
}
/>
</>
<Button
key={i.toString()}
primary
icon={<TrashCanIcon />}
text
onClick={() => deleteHoliday(i)}
/>
<span>{JSON.stringify(state.daysOffList)}</span>
</Flex>
);
})}
</>
);
};
export default Holidays;
Update
I'm trying to make a uniq id by adding timeStamp.
return (
<Flex key={`${JSON.stringify(elm)} ${Date.now()}`} gap="gap.small">
<>
<Header as="h5" content="Start Date" />
<Datepicker
defaultSelectedDate={
new Date(`${elm.start}/${new Date().getFullYear()}`)
}
/>
</>
<>
<Header as="h5" content="End Date" />
<Datepicker
defaultSelectedDate={
new Date(`${elm.end}/${new Date().getFullYear()}`)
}
/>
</>
<Button
primary
key={`${JSON.stringify(elm)} ${Date.now()}`}
icon={<TrashCanIcon />}
text
onClick={() => deleteHoliday(i)}
/>{" "}
</Flex>
);
I was hoping that the error disappear but still getting same behaviour
Issue
You are using the array index as the React key and you are mutating the underlying data array. When you click the second entry to delete it, the third element shifts forward to fill the gap and is now assigned the React key for the element just removed. React uses the key to help in reconciliation, if the key remains stable React bails on rerendering the UI.
You also can't console log state immediately after an enqueued state update and expect to see the updated state.
setState(update(state, { daysOffList: { $set: objects } }));
console.log(state.daysOffList);
React state updates are asynchronous and processed between render cycles. The above can, and will, only ever log the state value from the current render cycle, not the update enqueued for the next render cycle.
Solution
Use a GUID for each start/end data object. uuid is a fantastic package for this and has really good uniqueness guarantees and is incredibly simple to use.
import { v4 as uuidV4 } from 'uuid';
// generate unique id
uuidV4();
To specifically address the issues in your code:
Add id properties to your data
const daysOffList = [
{ id: uuidV4(), start: "12/12", end: "12/15" },
{ id: uuidV4(), start: "12/12", end: "12/17" },
{ id: uuidV4(), start: "12/12", end: "12/19" }
];
...
const addNewHoliday = () => {
const obj = {
id: uuidV4(),
start: "12/12",
end: "12/13",
};
setState(update(state, { daysOffList: { $push: [obj] } }));
};
Update handler to consume id to delete
const deleteHoliday = (id) => {
const objects = state.daysOffList.filter((elm) => elm.id !== id);
setState(update(state, { daysOffList: { $set: objects } }));
};
Use the element id property as the React key
{state.daysOffList?.map((elm, i) => {
return (
<Flex key={elm.id} gap="gap.small">
...
</Flex>
);
})}
Pass the element id to the delete handler
<Button
primary
icon={<TrashCanIcon />}
text
onClick={() => deleteHoliday(elm.id)}
/>
Use an useEffect React hook to log any state update
useEffect(() => {
console.log(state.daysOffList);
}, [state.daysOffList]);
Demo
Note: If you don't want (or can't) install additional 3rd-party dependencies then you can roll your own id generator. This will work in a pinch but you should really go for a real proven solution.
const genId = ((seed = 0) => () => seed++)();
genId(); // 0
genId(); // 1
I would like to know how can i destruct object within .map function using javascript, i have react js component and within return method i have the code below:
return (
<>
{setItems.map(setItem => (
const { childContentfulPartFeatureSetLearnMoreOptionalTextTextNode: learnNode} = setItem
....
</>
and i have the next error: Parsing error: Unexpected token ... = setItem, i thought what it is
EsLinterror and used // eslint-disable-next-line to disable it, but it didn't work.
UPD full return code:
return (
<div className={generalServiceItemClassName} key={guuid()}>
{setItems.map(setItem => (
const { childContentfulPartFeatureSetLearnMoreOptionalTextTextNode: learnNode} = setItem
<div
key={guuid()}
className={cx(columnSizeClass, "service-items__item")}
data-test="service-items"
>
{setItem.learnMore ? (
<LearnMore
className="service-items__item-learn-more-container"
learnMoreLink={setItem.learnMore}
text={}
textClassName="service-items__item-texts-learn-more"
learnMoreText={learnNode ? learnNode.setItem : null}
>
{renderItem(setItem)}
</LearnMore>
) : (
renderItem(setItem)
)}
</div>
))}
</div>
)
You can't have a const declaration within an expression, and when you use the concise form of an arrow function (=> without a { after it), the body is an expression.
You can destructure in the parameter list, though. For instance:
{setItems.map(({childContentfulPartFeatureSetLearnMoreOptionalTextTextNode: learnNode}) => (
// ...use `learnNode` here...
In context:
return (
<div className={generalServiceItemClassName} key={guuid()}>
{setItems.map(({childContentfulPartFeatureSetLearnMoreOptionalTextTextNode: learnNode}) => (
<div
key={guuid()}
className={cx(columnSizeClass, "service-items__item")}
data-test="service-items"
>
{setItem.learnMore ? (
<LearnMore
className="service-items__item-learn-more-container"
learnMoreLink={setItem.learnMore}
text={}
textClassName="service-items__item-texts-learn-more"
learnMoreText={learnNode ? learnNode.setItem : null}
>
{renderItem(setItem)}
</LearnMore>
) : (
renderItem(setItem)
)
}
</div>
))}
</div>
);
Try something like this. (destructure and renaming)
const setItems = [{ abc: 5 }];
return (
<>
{setItems.map((setItem) => {
const { abc: xyz } = setItem;
return <div>{xyz}</div>;
})}
</>
);
// Alternate way, simplified.
return (
<>
{setItems.map(({ abc: xyz }) => (
<div>{xyz}</div>
))}
</>
);
I couldn't understand why...here is the GitHub repository: https://github.com/Dronrom/React-test
That’s because you initialized peopleList as null in your component. So map works only on arrays so you need to check peopleList whether its really an array before doing map on it so
Change
renderItems(arr) {
return arr.map(({id, name}) => {
return (
<li className="list-group-item"
key={id}
onClick={() => this.props.onItemSelected(id)}>
{name}
</li>
);
});
}
To
renderItems(arr) {
if(arr){
return arr.map(({id, name}) => {
return (
<li className="list-group-item"
key={id}
onClick={() => this.props.onItemSelected(id)}>
{name}
</li>
);
});
}
}
I think your issue may be that react renders once before componentDidMount(). This is an issue because your calling map on arr which is null. const { peopleList } = this.state; you set people list to your current state which you set as default to be null, state = {peopleList: null}; then you later call this.renderItems(peopleList); which people list is still null at this moment so you are getting the Cannot read property 'map' of null error.
I belive something like componentWillMount is what you need instead. I recommend looking at this post which has a similar issue of react life cycle methods. React render() is being called before componentDidMount()
the answer is very simple: the type of the input isn't array type, it might be null or undefined. so that it doesn't have .map function.
How to fix:
Make sure your input must be array type before call renderItems().
render(){
const { peopleList } = this.state;
const items = (peopleList && peopleList.length) ? this.renderItems(peopleList) : null;
return(
<ul className="item-list list-group">
{items}
</ul>
);
}
Or:
Make sure your input must be array type before do mapping:
renderItems(arr) {
return !arr ? null : arr.map(({id, name}) => {
return (
<li className="list-group-item"
key={id}
onClick={() => this.props.onItemSelected(id)}>
{name}
</li>
);
});
{product.size?.map(c=>(
<FilterSizeOption key={c}>{c}</FilterSizeOption>
))}
Wrapping the return statement with a if statement worked for me
So changed
return (
<div>
<Navbar />
{countries.map((country, i) => {
return (
<div>
<span key={`${country.name.common}${i}`}>
{country.name.common}
</span>
</div>
);
})}
</div>
);
to this
if (countries) {
return (
<div>
<Navbar />
{countries.map((country, i) => {
return (
<div>
<span key={`${country.name.common}${i}`}>
{country.name.common}
</span>
</div>
);
})}
</div>
);
}
This is my following code:-
if(this.props.buttons && this.props.buttons.tabs && this.props.buttons.tabs.length) {
this.props.buttons.tabs.map((button) => {
return (
<TabsPanel label={button.labelKey} />
button.subtabs.map((subtab) => {
return(
<Tabs>
<TabsPanel label={subtab.labelKey}></TabsPanel>
</Tabs>
)
})
)
});
}
While running this following code it's always giving Syntax Error.
Here's my following JSON which I am getting
"tabs" : [
{
"labelKey" : "label1",
"subtabs" : [
{
"form" : {
"labelKey" : "subtab1"
}
},
{
"form" : {
"labelKey" : "subtab2"
}
}
]
},
{
"labelKey" : "label2"
}
]
Any leads would be helpful. I am stuck at a dead end right now.
Thanks!
The question is not very clear. But here are a few scenarios that I think could be intended.
TabsPanel component accepts Tabs as children:
Answer by Prabin is as correct as it gets. (Except for missing key attributes in TabsPanel and Tabs components)
TabsPanel component and Tabs list go side by side:
Note: A valid component is either one single root, or it is a list of other valid components.
So either this is correct.
this.props.buttons.tabs.map((button, index) => {
return (
<div key={index}>
<TabsPanel label={button.labelKey} />
{button.subtabs.map(subtab => {
return (
<Tabs key={subtab.labelKey}>
<TabsPanel label={subtab.labelKey} />
</Tabs>
)
})}
</div>
)
})
Or this is correct.
this.props.buttons.tabs.map((button, index) => {
return [
<TabsPanel label={button.labelKey} key={index} />,
{
...button.subtabs.map(subtab => {
return (
<Tabs key={subtab.labelkey}>
<TabsPanel label={subtab.labelKey} />
</Tabs>
)
})
}
]
})
Also, note the key attribute in Tabs and TabsPanel components. That is important and I leave it up to you to find it's importance.
return (
<div>
{this.props.buttons && this.props.buttons.tabs && this.props.buttons.tabs.length &&
this.props.buttons.tabs.map(button => {
return (
<TabsPanel label={button.labelKey}>
{button.subtabs.map(subtab => {
return (
<Tabs>
<TabsPanel label={subtab.labelKey} />
</Tabs>
);
})}
</TabsPanel>
);
})}
</div>
);
Try this should solve your problem
I'm having some difficulty with rendering using .map. What I'm trying to do is to render the artist name, the song title, and a link to a page where you can find sheet music. I have a separate state for each one of these categories and it looks like this:
this.state = {
currentSearch: "",
artistName: [],
songTitle: [],
tabId: [],
}
Here is my render:
render(){
return(
<div>
{this.props.artist.map((artist, i) =>{
return(
<h3>{artist}</h3>
)
})}
{this.props.title.map((title, i) => {
return (
<h3>{title}</h3>
)
})}
{this.props.link.map((link, i) => {
return (
<h3>{link}</h3>
)
})}
</div>
)
}
The main problem that I'm having is that the information will display on the page like this:
The Beatles
The Beatles
The Beatles
All You Need Is Love
Blackbird
Twist and Shout
www.allyouneedisloveurl.com
www.blackbirdurl.com
www.twistandshouturl.com
Is there a way I can map these so that they appear one after the other like this?
The Beatles
All You Need Is Love
www.songurl.com
Thank you!!
You can use the index to render the other data. Try
render(){
return(
<div>
{this.props.artist.map((artist, i) =>{
return(
<div key={i}>
<h3>{artist}</h3>
<h3>{this.props.title[i]}</h3>
<h3>{this.props.link[i]}</h3>
</div>
)
})}
</div>
)
}
You can put them all together in one map like this:
render(){
return(
<div>
{
this.props.artist.map((artist, i) =>{
return(
<div key={i} className="artist">
<h3>{artist}</h3>
<h3>{this.props.title[i]}</h3>
<h3>{this.props.link[i]}</h3>
</div>
)
})
}
</div>
)
}