We Keep Coding

React Component inside .map() is throwing an error: TypeError: notes.map is not a function

am trying to show Noteitem component which is returned inside a map function.
{notes.map((note) => {
return (
<Noteitem key={note._id} updateNote={updateNote} showAlert={props.showAlert} note={note} />
);
})}

notes should be an array for map function to work. You can check it in following way if notes is not null and is an array using notes.length and apply map function
{notes && notes.length && notes.map((note) => {
return (
<Noteitem key={note._id} updateNote={updateNote} showAlert={props.showAlert} note={note} />
);
})}

You can put if/else statement inside JSX to check the variable whether is exist or not
return (
<>
{
notes.length
? 'fallback'
: notes.map(note => <Noteitem key={note._id} updateNote={updateNote} showAlert={props.showAlert} note={note} />)
}
</>
)
IIFE
{(() => {
if ("check note") {
// fallback
}
return notes.map((note: NoteProps) => (
<Noteitem key={note._id} updateNote={updateNote} showAlert={props.showAlert} note={note} />
));
})()}

How to properly destruct object within map function using javascript?

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>
))}
</>
);

why would react not render conditionally

So i have an issue while trying to render this list, item.cars, item.yachts and item.villas are numbers, what could be the reason for this not showing absolutely anything?
const renderItems = (locations) => {
<div className={styles.list}>
{locations.map((item) => {
if (item.cars != 0 || item.yachts != 0 || item.villas != 0)
return (
<DestinationItem
id={item.id}
image={Image[item.id]}
name={item.name}
subtitle={item.description}
description={DESTINATIONS_DESCRIPTION[item.id]}
/>
);
return null;
})}
</div>;
};
this is an item in locations object
cars: 0
description: "(Miami, Palm Beach, Broward)"
id: 3
name: "South Florida"
photo: "http://l.amazonaws.com/areaphotos/Audi_R8_a.jpg"
villas: 69
yachts: 53
__proto__: Object
this is the whole component code:
const Destinations = locations => {
const renderItems = (locations) => {
<div className={styles.list}>
{locations.map(
(item) =>
(item.cars != 0 || item.yachts != 0 || item.villas != 0) && (
<DestinationItem
id={item.id}
key={item.id}
image={Image[item.id]}
name={item.name}
subtitle={item.description}
description={DESTINATIONS_DESCRIPTION[item.id]}
/>
)
)}
</div>;
console.log(locations, 'data');
return (
<div className={styles.mainContainer}>
<div className={styles.title}>
<h1>Pick Your Destination</h1>
</div>
{renderItems(locations)}
</div>
);
};
};
export default Destinations;

Ok, so I'm not fully sure, but I try not to use if statements in the DOM. Try this style of conditional instead:
<div className={styles.list}>
{locations.map((item) =>
(item.cars != 0 || item.yachts != 0 || item.villas != 0) && (
<DestinationItem
id={item.id}
key={item.id}
image={Image[item.id]}
name={item.name}
subtitle={item.description}
description={DESTINATIONS_DESCRIPTION[item.id]}
/>)
})
</div>;
The && operator acts as your if statement. And this way, you don't even need to include {}s in your map function. Also, don't forget to add a unique key to any mapped elements!

The Destinations component takes locations as a prop, correct? In that case, you'll want to either destructure the props object, like this:
const Destinations = ({ locations }) => {
or this
const Destinations = props => {
const { locations } = props
or just use the props object and access the fields separately:
const Destinations = props => {
// ...
return (
// ...
{renderItems(props.locations)}
// ...
)
}
Additionally, the renderItems function has curly braces around it, so you need to use return to return a value from it. It's currently returning undefined, as there is no return.
const renderItems = (locations) => {
return (
<div className={styles.list}>
{locations.map((item) => {
if (item.cars !== 0 || item.yachts !== 0 || item.villas !== 0)
return (
<DestinationItem
id={item.id}
image={Image[item.id]}
name={item.name}
subtitle={item.description}
description={DESTINATIONS_DESCRIPTION[item.id]}
/>
);
return null;
})}
</div>
);
};
Or you can use the concise form of an arrow function, and replace the curly braces with parentheses:
const renderItems = (locations) => (
<div className={styles.list}>
{locations.map((item) => {
if (item.cars !== 0 || item.yachts !== 0 || item.villas !== 0)
return (
<DestinationItem
id={item.id}
image={Image[item.id]}
name={item.name}
subtitle={item.description}
description={DESTINATIONS_DESCRIPTION[item.id]}
/>
);
return null;
})}
</div>
);
As a side-note, you'll almost always want to use strict equality operators (=== and !==) instead of abstract equality operators (== and !=). The latter one has its share of pitfalls, e.g. '1' == 1 is true, as unexpected things like [[]] == 0!

How to get iterator in a Object Key Map

I have the following code where I am iterating through a map. I want to get some type of iterator for each map entry I go through. Here is my code:
{
Object.keys(element.auditdiff).map(dataType => {
if (dataType !== "Lid" && dataType !== "Datacenter" && dataType !== "Id")
return Object.keys(element.auditdiff[dataType]).map(data => {
//can I somehow make this include an iterator???
return (
<Table.Row key={data}>
<Table.Cell>
<Button
content="Update Row"
color="green"
disabled={updated.indexOf(key) > -1}
onClick={() => {
this.handleUpdate(key);
}} //I want to send the update for each iterator
/>
</Table.Cell>
</Table.Row>
);
});
});
}

Within your map function you can pass and index to check against.
I would suggest using the index as your key.
Like so:
{Object.keys(element.auditdiff).map((dataType, index) => {
return (
<Table.Row key={index}></Table.Row>
)
})}

React won't render within map function

I'm trying to render an array containing some objects using the JS function map().
However when I return the text nothing is shown:
console.log(this.props.project.projects); // (2) [{…}, {…}]
this.props.project.projects.map((item, index) => {
console.log(item.projectDescription); //"Testproject"
return (
<div key={index}>
{item.projectDescription}
</div>
)
})
I just don't get it, why there is no text shown, since the console.log(item.projectDescription) shows exactly what I want to display.
Update:
It works when I change it to this:
return this.props.project.projects.map((item, index) => (
<div key={index} style={{ color: '#fff' }}>
{item.projektBeschreibung}
</div>
))
I already thought about using the foreach-method but I think it should actually work using the map()-function.
Here you can see also the render method of my Component.
class ProjectRow extends Component {
renderProjects() {
console.log(this.props.project);
if (this.props.project.loading) {
return (
<div style={{color: '#fff'}}>
Loading
</div>
)
} else {
console.log(this.props.project.projects);
this.props.project.projects.map((item, index) => {
console.log(item);
console.log(item.projektBeschreibung);
console.log(index);
return (
<div key={index}>
{item.projektBeschreibung}
</div>
)
})
}
}
render() {
return (
<div>
{this.renderProjects()}
</div>
);
}
}

The renderProjects function is not returning anything when it hits your else case. Here is an example of use:
renderProjects() {
console.log(this.props.project);
if (this.props.project.loading) {
return (
<div style={{color: '#fff'}}>
Loading
</div>
)
} else {
console.log(this.props.project.projects);
// added return statement here
return this.props.project.projects.map((item, index) => {
console.log(item);
console.log(item.projektBeschreibung);
console.log(index);
return (
<div key={index}>
{item.projektBeschreibung}
</div>
)
})
}
}

why not use map like below ?
render(){
return(
<div>
{this.props.project.projects.map((item, index) => (
<div key={index}>
{item.projectDescription}
</div>
))}
</div>
)
}