We Keep Coding

Nested Map is not working properly on react template

I am trying to mapping through three objects in react to render multiple categories on react template , Code doesn't give any error but its not showing any content on react web page.
return (
<div className="container pt-80">
<center>Category Grouping</center>
{categories.map((cate,key)=>{
subCategories.map(subCate=>{
if(subCate.category === cate.id){
pType.map(ptype=>{
if (ptype.category === subCate.id){
console.log("Category : ",cate.category)
console.log("Sub Category : ",subCate.subCatName)
console.log("Product Type : ",ptype.ptype)
console.log("*******************************************")
return(
<Fragment>
<h1 style={{marginLeft:"30px"}}>{cate.category}</h1>
<h1 style={{marginLeft:"60px"}}>{subCate.subCatName}</h1>
<h1 style={{marginLeft:"120px"}}>{ptype.ptype}</h1>
</Fragment>
)
}
})
}
})
})}
</div>
)
Its printing the correct values in console :

Extending what #Akhil said in the comment. You are actually not returning anything in you're first two map calls, only the last.
add return before both nested map calls:
return subCategories.map(subCate=>{...
and
return pType.map(ptype=>{
Also I would add a return null after your if statements. Map expects a return value.
if(subCate.category === cate.id){
....
}
return null;
and
if (ptype.category === subCate.id){
....
}
return null;

Look into the comment by #Akhil. You missed the return for the map.
const categories = [{ id: 1, category: "Foods & Supplements" }];
const subCategories = [{ id: 1, category: 1, subCatName: "Herbal Drinks" }];
const pType = [
{ id: 1, category: 1, ptype: "Herbal Juice" },
{ id: 2, category: 1, ptype: "Herbal Coffee Tea&Soup" }
];
export default function App() {
return (
<div>
<h1>Category Grouping</h1>
{categories.map((cate, key) => (
<div key={key}>
{subCategories.map((subCate, sKey) => (
<div key={sKey}>
{subCate.category === cate.id &&
pType.map((ptype, pKey) => (
<div key={pKey}>
{ptype.category === subCate.id && (
<>
<h1 style={{ marginLeft: "30px" }}>{cate.category}</h1>
<h1 style={{ marginLeft: "60px" }}>
{subCate.subCatName}
</h1>
<h1 style={{ marginLeft: "120px" }}>{ptype.ptype}</h1>
</>
)}
</div>
))}
</div>
))}
</div>
))}
</div>
);
}
Also, use some sort of linting (e.g. Eslint) and format the code, both will help to catch syntax errors.

How to check if the array of object is null using react and javascript?

I am mapping an array of objects and rendering a div based on it.
Below is my code:
const App = () => {
const types = React.useMemo(() => {
return get(data, 'something.typesDetails', []);
}, [data]);
return (
{true &&
<div> header </div>
<div>
{types.map((t => {
return (
<div>{type.name}</div>
)
})}
</div>
}
);
}
Here is the types array:
const types = [
{
id: '1',
name: 'type1',
},
{
id: '2',
name: 'type2',
},
]
The above code works fine when data structure is like above.
But consider if types has value like so
const types = [
{
id: null,
name: null,
}
]
In this case, it will still map through types and display div. I don't want to display div element. How can I check if types value contains null or stop looping through types if it has value like above?

You can use filter to remove elements with null values.
types = types.filter(x => !Object.values(x).includes(null));
You can also use Array#every to check:
if(types.every(x => !Object.values(x).includes(null)){
//go ahead with mapping
}

You can filter object inside of array and then map through them:
return (
{true &&
<div> header </div>
<div>
{types.filter(t => t.id != null && t.name != null)
.map((t => {
return (<div>{type.name}</div>)
})}
</div>
}
);

react map array of objects separately

I have facing an issue in React JS. I want to show full name data separately.
Array of Object
0: {id: "1", wp_user_id: null, facebook_id: null, group_id: null, full_name: "furqan", …}
1: {id: "3", wp_user_id: null, facebook_id: null, group_id: null, full_name: "hassan",..}
My Code:
this.state = {
cusomterdata:[],
}
}
render() {
return (
<div>
{this.state.cusomterdata.map(function(item, i){
return ([
<p key={i}>{item.full_name}</p>,
<p key={i}>{item.id}</p>,
]);
})}
<div>
)
}
When i run this code Result here, They both come together
- furqan
- 1
- hassan
- 3
I want to do like this but it is not working.
<p key={i}>{item.full_name[0]}</p>, //just show first fullname
Expected Output
What should i do? Can anyone help me?

As far as I have understood, you just want to show the full_name only from the first item.
You may do the following:
render() {
let FullName = null;
if (this.state.cusomterdata) {
FullName = (
{
this.state.cusomterdata.map((data, index) => {
return (
<p key={index}>{data.full_name}</p>
)
})
}
)
}
return (
<div>
{ FullName }
</div>
)
}

How to Map and Filter in Reactjs

carModel:
[
{_id : A, title : 2012},
{_id : B, title : 2014}
],
car: [{
color :'red',
carModel : B //mongoose.Schema.ObjectId
},
{
color :'black',
carModel : B //mongoose.Schema.ObjectId
}
]
Here i add carModel ID on car's carModel and trying to filter on my react page
car.map(item=>
<p>{item.color}</p>
<p>{carModel.map(model=> model.filter(model._id == item.carModel ? model.title : null)}
)
I want to show carModel on page, here above code is not working and i believe this is not an exact method to do this, please rectify me

You need to return your elements like this to make it work. Also wrapping your elements with a div or something
car.map(item=>
return (<div>
<p>{item.color}</p>
<p>{carModel.map(model=> model.filter(model._id == item.carModel ? model.title : null)}
</div>)
)

filter method callback parameter is a function and you need to return one element in map function, so;
car.map(item=> {
return (<div>
<p>{item.color}</p>
{carModel.filter(model => model._id === item.carModel).map(model => <p>{model.title}</p>)}
</div>);
})

You can use following:
car.map(item=> {
const filteredModels = carModel.filter(model => model._id === item.carModel);
return (
<div>
<p>{item.color}</p>
{filteredModels.map(model => <p>{model.title}</p>)}
</div>
);
})

car.map(item=> {
return (
<p>{item.color}</p>
{
carModel.filter(model => model._id === item.carModel)
.map(m => <p>{m.title}</p>)
}
);
})

Looping through an object then through a nested array of objects--javascript react/redux

I am trying to loop through an array to pull one piece of info from an object. Got it! However, I need to loop through an array within that same object after having gotten the first piece of data to pull more data from the nested array of objects. Any clue how I could make this work? I have tried multiple ways. I am now stuck at trying to run two if statements in this render function which react/redux is not "liking". I.e. it will not execute the 2nd if statement. Any help is appreciated. There is a sample of my data structure at the bottom Thanks!
render(){
let takePoll;
let choices;
if(this.props.polls.length > 0){
takePoll = this.props.polls.map( poll => {
if (this.props.pollId === poll.id){
return (
<div>
<h2 className="take-poll">{poll.text}</h2>
</div>
)
}
})
}
if(this.props.polls.length > 0){
let choices = this.props.polls.map(poll => {
if (this.props.pollId === poll.id){
return poll.choices.map(obj => {
return (
<div>
<h3>{obj.choice}</h3>
</div>
)
})
}
})
}
return (
<div>
{takePoll}
{choices}
</div>
)
}
//DATA STRUCTURE BELOW:
{
"id": "596dfbbc02c10a41e05a82d5",
"text": "which summer was hotter?",
"choices": [
{
"choice": "2017",
"vote": "0"
},
{
"choice": "2004",
"vote": "0"
}
],
"date": "2017-07-18T12:14:52.791Z" }

Two if() statements that have the same exact variable/value check should not be your fix. Given what #Anamul suggested, you may want to try something like this:
render() {
let takePoll;
let choices;
if (this.props.polls.length > 0) {
takePoll = this.props.polls.map(poll => {
if (this.props.pollId === poll.id) {
return (
<div>
<h2 className="take-poll">{poll.text}</h2>
</div>
)
}
})
choices = this.props.polls.map(poll => {
if (this.props.pollId === poll.id) {
return poll.choices.map(obj => {
return (
<div>
<h3>{obj.choice}</h3>
</div>
)
})
}
})
}
return (
<div>
{takePoll}
{choices}
</div>
)
}

well if I were you, I will do it in one loop
render(){
let takePoll = [];
let choices = [];
for(let i = 0; i < this.props.polls.length; i++) {
let poll = this.props.polls[i]
if (this.props.pollId === poll.id){
takePool.push(
<div>
<h2 className="take-poll">{poll.text}</h2>
</div>
)
choices.concat(poll.choices.map(obj => {
return (
<div>
<h3>{obj.choice}</h3>
</div>
)
}))
}
})
return (
<div>
{takePoll}
{choices}
</div>
)}
note that I have tested the code yet