Develop Reference

How to filter an object array based on the contents of child array?

I have this data
var data = [
{
title: "App development summary",
category: [],
},
{
title: "to experiment 2",
category: [],
},
{
title: "Some of these books I have read",
category: [
{
_id: "5f7c99faab20d14196f2062e",
name: "books",
},
{
_id: "5f7c99faab20d14196f2062f",
name: "to read",
},
],
},
{
title: "Quora users and snippets",
category: [
{
_id: "5f7c99feab20d14196f20631",
name: "quora",
},
],
},
{
title: "Politics to research",
category: [
{
_id: "5f7c9a02ab20d14196f20633",
name: "politics",
},
],
},
];
Say I want to get all the entries with the category of books. I tried doing this:
var bookCat = data.map(note => {
return note.category.map(cat => {
if(cat.name === "books" ) return note
})
})
But the result comes back with some empty and undefined arrays.
I was able to filter the empty arrays (at one point) but not the undefined
Edit
In plain English "if the object ha category.name "books", give me the title"

Filter by whether the array's category contains at least one name which is books:
var data=[{title:"App development summary",category:[]},{title:"to experiment 2",category:[]},{title:"Some of these books I have read",category:[{_id:"5f7c99faab20d14196f2062e",name:"books"},{_id:"5f7c99faab20d14196f2062f",name:"to read"}]},{title:"Quora users and snippets",category:[{_id:"5f7c99feab20d14196f20631",name:"quora"}]},{title:"Politics to research",category:[{_id:"5f7c9a02ab20d14196f20633",name:"politics"}]}];
const output = data
.filter(item => item.category.some(
({ name }) => name === 'books'
));
console.log(output);
If there's guaranteed to be only a single matching object, use .find instead:
var data=[{title:"App development summary",category:[]},{title:"to experiment 2",category:[]},{title:"Some of these books I have read",category:[{_id:"5f7c99faab20d14196f2062e",name:"books"},{_id:"5f7c99faab20d14196f2062f",name:"to read"}]},{title:"Quora users and snippets",category:[{_id:"5f7c99feab20d14196f20631",name:"quora"}]},{title:"Politics to research",category:[{_id:"5f7c9a02ab20d14196f20633",name:"politics"}]}];
const output = data
.find(item => item.category.some(
({ name }) => name === 'books'
));
console.log(output);

Using map on array of objects results in a errormessage

I am trying to figure out why this simple code does not work, it feels like I have done exactly the same thing many times before without errors. What have I done wrong?
import React, {useState} from 'react'
import { MenuItem } from '../menu-item/menu-item.component'
import './directory.styles.scss'
export const Directory = () => {
const sections = [
{
title: 'hats',
imageUrl: 'https://i.ibb.co/cvpntL1/hats.png',
id: 1,
linkUrl: 'shop/hats'
},
{
title: 'jackets',
imageUrl: 'https://i.ibb.co/px2tCc3/jackets.png',
id: 2,
linkUrl: 'shop/jackets'
},
{
title: 'sneakers',
imageUrl: 'https://i.ibb.co/0jqHpnp/sneakers.png',
id: 3,
linkUrl: 'shop/sneakers'
},
{
title: 'womens',
imageUrl: 'https://i.ibb.co/GCCdy8t/womens.png',
size: 'large',
id: 4,
linkUrl: 'shop/womens'
},
{
title: 'mens',
imageUrl: 'https://i.ibb.co/R70vBrQ/men.png',
size: 'large',
id: 5,
linkUrl: 'shop/mens'
}
];
return (
<div className="directory-menu">
{sections.map((title, imageUrl, id) => <MenuItem key={id} title={title} imageUrl={imageUrl}/>)}
</div>
)
}
Error Message:
Error: Objects are not valid as a React child (found: object with keys
{title, imageUrl, id, linkUrl}). If you meant to render a collection
of children, use an array instead.

You are not destructuring properly i.e.
.((title, imageUrl, id) =>
should be
.(({title, imageUrl, id}) =>

Check out this post, it's a common React error.
You could also try something like this
Object.entries(sections).map((x)=>
return x.title;
})

Structuring Nested Arrays

I have a fetch api call which returns a really large array full of books and associated information, from which I only need the title, author, and associated passages. In componentDidMount() I am trying to grab the these values, and push them into a new array, structured in a way that makes sense for my project.
I am successfully grabbing and pushing the values, but I'm not able to maintain the nested structure. I would like the book title and author at the top, and then have the passages in a nested array associated with the book. My current code just pushes everything to same level, with no nesting.
In the code below, I would essentially like this.state.dummyBooks and this.state.booksStructured to be identical.
jsfiddle
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
dummyBooks: [
{
title: "book title one",
author: "book author one",
passages: [
{
id: 1,
passage: "this is a passage",
},
{
id: 2,
passage: "this is another passage",
},
],
},
{
title: "book title two",
author: "book author two",
passages: [
{
id: 3,
passage: "this is a third passage",
},
{
id: 4,
passage: "this is yet another passage",
},
],
},
],
booksStructured: [],
};
}
componentDidMount() {
this.state.dummyBooks.map(bookObject => {
this.state.booksStructured.push({
bookTitle: bookObject.title,
bookAuthor: bookObject.author,
});
bookObject.passages.map(passageObject => {
this.state.booksStructured.push({
passageID: passageObject.id,
passageText: passageObject.passage,
});
});
});
}
render() {
console.log(this.state.booksStructured);
return <div>check the console</div>;
}
}
ReactDOM.render(<App />, document.querySelector("#app"));

Just grab the required keys from this.state.dummyBooks and push it to the this.state.booksStructured:
componentDidMount() {
for(const {title, author, passages} of this.state.dummyBooks){
this.state.booksStructured.push({title:title,author:author,passages:passages});
}
}

Rather than trying to set this.state.booksStructured as your looping through this.state.dummyBooks, create an array based on the mapping values in this.state.dummyBooks, creating variables and assigning the updated key/value pairs accordingly. When that's finished use this.setState({...}) to assign the new array to this.state.booksStructured.
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
dummyBooks: [
{
'title': 'book title one',
'author': 'book author one',
'passages': [
{
'id': 1,
'passage': 'this is a passage'
}, {
'id': 2,
'passage': 'this is another passage'
}
]
}, {
'title': 'book title two',
'author': 'book author two',
'passages': [
{
'id': 3,
'passage': 'this is a thridpassage'
}, {
'id': 4,
'passage': 'this is yet another passage'
}
]
}
],
booksStructured: [],
}
}
componentDidMount() {
var booksStructured = this.state.dummyBooks.map(bookObject => {
var obj = {}
var {title, author, passages} = bookObject
obj['bookTitle'] = title
obj['bookAuthor'] = author
passages = passages.map(x=>{
var passageObj = {}
passageObj['passageID'] = x.id
passageObj['passageText'] = x.passage
return passageObj
});
obj['passages'] = passages
return obj
})
this.setState({
booksStructured
})
}
render() {
console.log(this.state.booksStructured);
return (
<div>
check the console
</div>
)
}
}
ReactDOM.render(<App />, document.querySelector("#app"))
Check it out here.

If you look closely at the code in your componentDidMount method, you should notice that what you're actually doing is iterating over dummyBooks and pushing an object containing only the book author and title into the booksStructured array before pushing an object containing only the passage id and text into the booksStructured array. Hence, the resulting array of alternating book then passage objects.
Instead, you would want to create one object containing both book and passage information before pushing it into the booksStructured array. You should also not that it's advised to use setState() in favor of this.state.push():
Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable. docs
and you should generally not call setState() in a loop because
setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. docs
With that in mind, your solution should look something like this:
componentDidMount() {
const structuredBooks = [];
this.state.dummyBooks.map(bookObject => {
// Iterate over each passage, returning a new object with only
// the wanted fields from each passage object
const structuredPasssages = bookObject.passages.map(passage => {
passageID: passageObject.id,
passageText: passageObject.passage,
});
// Construct a structured book object using the new passages
const structuredBook = {
bookTitle: bookObject.title,
bookAuthor: bookObject.author,
passages: structuredPassages,
};
// Push the structured book into "structuredBooks"
structuredBooks.push(structuredBook);
});
// Update state with the complete structuredBooks array
this.setState({ booksStructured: structuredBooks });
}

Use map to loop through the object and return the structure you want.
const booksStructured = apiData.map(book => {
return {
title: book.title,
author: book.author,
passages: book.passages
};
});
Please don't modify state variables directly, like
this.state.booksStructured.push({ title:title,author:author, passages:passages});
Save the value in a local variable and update state using .setState()
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>
<script>
const apiData = [
{
title: 'book title one',
author: 'book author one',
more: 'more',
xtra: 'tets',
year: 2030,
passages: [
{
id: 1,
passage: 'this is a passage',
},
{
id: 2,
passage: 'this is another passage',
},
],
},
{
title: 'book title two',
author: 'book author two',
more: 'more',
xtra: 'tets',
year: 2000,
passages: [
{
id: 1,
passage: 'this is a passage',
},
{
id: 2,
passage: 'this is another passage',
},
],
},
{
title: 'book title three',
author: 'book author three',
more: 'more',
xtra: 'tets',
year: 2001,
passages: [
{
id: 1,
passage: 'this is a passage',
},
{
id: 2,
passage: 'this is another passage',
},
],
},
];
</script>
<script type="text/babel">
class App extends React.Component {
constructor() {
super();
this.state = {
name: "React",
dummyBooks: [
{
title: "book title one",
author: "book author one",
passages: [
{
id: 1,
passage: "this is a passage"
},
{
id: 2,
passage: "this is another passage"
}
]
},
{
title: "book title two",
author: "book author two",
passages: [
{
id: 3,
passage: "this is a third passage"
},
{
id: 4,
passage: "this is yet another passage"
}
]
}
],
booksStructured: []
};
}
componentDidMount = () => {
const booksStructured = apiData.map(book => {
return {
title: book.title,
author: book.author,
passages: book.passages
};
});
this.setState({
booksStructured: booksStructured
});
};
render() {
console.log(this.state.booksStructured);
return <div>check the console</div>;
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
</script>

Can't retreive my movies data after importing array function in React JS

I can't pass my data from the fakeGenreService.js via array.
Please check the screenshot for the data rendered.
You will see that all things are being rendered, just not (the movie Title, Genre, Stock and Rate) which are available in the fakeGenreService.js
Please do let me know where I am going wrong??????
PLEASE DO LET ME KNOW WHY MY DATA IS NOT BEING RENDERED AND WHAT I NEED TO MAKE THE CHANGES IN THE CODE
I WILL REALLY APPRECIATE YOUR HELP!!!!!!
I am uploading my three files below
App.js
fakeGenreService.js
movies.js
Please check if I am passing the array correctly in the state block?????``
Here is App.js
http://prnt.sc/olccj9
Here is fakegenreService.js
http://prnt.sc/olcdr5
Here is movies.js
http://prnt.sc/olce2x
Here is the final result for the developmentserver
http://prnt.sc/olcejx
Tried various troubsleshooting steps for the array function
This part deals with App.js
import React, { Component } from "react";
import React, { Component } from "react";
import Movies from "./components/movies";
import "./App.css";
class App extends Component {
render() {
return (
<main className="container">
<Movies />
</main>
);
}
}
export default App;
This part is for movies.js
import React, { Component } from "react";
import { getMovies } from "../services/fakeMovieService";
class Movies extends Component {
constructor(props) {
super(props);
this.state = {
movies: [getMovies()]
};
}
handleDelete = movie => {
console.log(movie);
};
render() {
return (
<table className="table">
<thead>
<tr>
<th>Title</th>
<th>Genre</th>
<th>Stock</th>
<th>Rate</th>
<th />
</tr>
</thead>
<tbody>
{this.state.movies.map(movie => (
<tr key={movie._id}>
<td>{movie.title}</td>
<td>{movie.genre}</td>
<td>{movie.numberInStock}</td>
<td>{movie.dailyRentalRate}</td>
<td>
<button
onCick={() => this.handleDelete(movie)}
className="btn btn-danger btn-sm"
>
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
);
}
}
export default Movies;
Here is fakeMovieService.js
import * as genresAPI from "./fakeGenreService";
const movies = [
{
_id: "5b21ca3eeb7f6fbccd471815",
title: "Terminator",
genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
numberInStock: 6,
dailyRentalRate: 2.5,
publishDate: "2018-01-03T19:04:28.809Z"
},
{
_id: "5b21ca3eeb7f6fbccd471816",
title: "Die Hard",
genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
numberInStock: 5,
dailyRentalRate: 2.5
},
{
_id: "5b21ca3eeb7f6fbccd471817",
title: "Get Out",
genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
numberInStock: 8,
dailyRentalRate: 3.5
},
{
_id: "5b21ca3eeb7f6fbccd471819",
title: "Trip to Italy",
genre: { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
numberInStock: 7,
dailyRentalRate: 3.5
},
{
_id: "5b21ca3eeb7f6fbccd47181a",
title: "Airplane",
genre: { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
numberInStock: 7,
dailyRentalRate: 3.5
},
{
_id: "5b21ca3eeb7f6fbccd47181b",
title: "Wedding Crashers",
genre: { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
numberInStock: 7,
dailyRentalRate: 3.5
},
{
_id: "5b21ca3eeb7f6fbccd47181e",
title: "Gone Girl",
genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
numberInStock: 7,
dailyRentalRate: 4.5
},
{
_id: "5b21ca3eeb7f6fbccd47181f",
title: "The Sixth Sense",
genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
numberInStock: 4,
dailyRentalRate: 3.5
},
{
_id: "5b21ca3eeb7f6fbccd471821",
title: "The Avengers",
genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
numberInStock: 7,
dailyRentalRate: 3.5
}
];
export function getMovies() {
return movies;
}
export function getMovie(id) {
return movies.find(m => m._id === id);
}
export function saveMovie(movie) {
let movieInDb = movies.find(m => m._id === movie._id) || {};
movieInDb.name = movie.name;
movieInDb.genre = genresAPI.genres.find(g => g._id === movie.genreId);
movieInDb.numberInStock = movie.numberInStock;
movieInDb.dailyRentalRate = movie.dailyRentalRate;
if (!movieInDb._id) {
movieInDb._id = Date.now();
movies.push(movieInDb);
}
return movieInDb;
}
export function deleteMovie(id) {
let movieInDb = movies.find(m => m._id === id);
movies.splice(movies.indexOf(movieInDb), 1);
return movieInDb;
}
The result of the data being rendered is shown here:
http://prnt.sc/olcejx
Please let me know how could the movies defined in getMovies() function coud be rendered in the table.

The issue seems to be here. getMovies would already return an array. You're wrapping it inside another one. Here, in yout Movies Component class, change it to just the function call:
constructor(props) {
super(props);
this.state = {
movies: getMovies() // [getMovies()]
};
}

You wrap the movies array into a second array. That does not work. You should write it like this :
this.state = {
movies: getMovies()
};

getMovies() already returning array. You are calling that function inside an array. so movies have an array of array. like this movies: [[datas]].
In movies.js file do this changes in the constructor. It should work.
this.state = {
movies: getMovies();
}

How do you define a state of an object inside an array of an array in a reducer (ReactJS + Redux)?

So inside my reducer, I have an array of objects called 'todos', and an object of 'todos' has a state which is also an array of objects, called 'comments'. And inside each of 'comments' array, I would like to define a string state 'commentText', but I can't seem to figure out how to do so. Any help would be greatly appreciated.
Following is an example of what I would like to achieve:
let todoReducer = function(todos = [], action){
switch(action.type){
case 'ADD_TODO':
return [{
comments:[{
commentText: action.commentText
}]
}, ...todos]
case 'CREATE_COMMENT_ARRAY':
return [{
commentText: action.eventValue
], ...todos.comments] //Referencing todos.comments as 'comments' array of objects of an object of 'todos' array. Would like to directly update if possible and build up 'comments' array.
default:
return todos
}
}
export default todoReducer
NEW EDIT**:
case 'UPDATE_COMMENT':
return todos.map(function(todo){
if(todo.id === action.id){
//want to add a new a 'comment' object to the todo's 'comments' array
//Something like the following:
todo.comments: [{
commentText: action.commentText
}, ...todo.comments]
}
})

This sounds like a great use case for the .map() Array method.
Assuming your data looks like this:
var todos = [
{
id: 1,
title: 'Todo 1 Title',
body: 'Todo 1 Body',
date: 1425364758,
comments: [
{
id: 1,
commentorId: 42069,
text: 'Todo 1, Comment 1 Text',
date: 1425364758
},
{
id: 2,
commentorId: 42069,
text: 'Todo 1, Comment 2 Text',
date: 1425364758
},
{
id: 3,
commentorId: 42069,
text: 'Todo 1, Comment 3 Text',
date: 1425364758
}
]
},
{
id: 2,
title: 'Todo 2 Title',
body: 'Todo 2 Body',
date: 1425364758,
comments: [
{
id: 1,
commentorId: 42069,
text: 'Todo 2, Comment 1 Text',
date: 1425364758
}
]
},
{
id: 3,
title: 'Todo 3 Title',
body: 'Todo 3 Body',
date: 1425364758,
comments: [
{
id: 1,
commentorId: 42069,
text: 'Todo 3, Comment 1 Text',
date: 1425364758
},
{
id: 2,
commentorId: 42069,
text: 'Todo 3, Comment 2 Text',
date: 1425364758
}
]
}
];
When updating a comment, you'd need to pass in a todoId and a commentId so you know what to look for. When adding a comment, you'd only need to pass in a todoId so you know which todo to update:
const todoReducer = (todos = [], action) => {
switch(action.type) {
case 'ADD_TODO':
return [
action.todo,
...todos
];
case 'ADD_COMMENT':
const { todoId, comment } = action;
// Map through all the todos. Returns a new array of todos, including the todo with a new comment
return todos.map(todo => {
// Look for the todo to add a comment to
if (todo.id === todoId) {
// When the todo to update is found, add a new comment to its `comments` array
todo.comments.push(comment);
}
// Return the todo whether it's been updated or not
return todo;
});
case 'UPDATE_COMMENT':
const { todoId, commentId, commentText } = action;
// Map through all the todos. Returns a new array of todos, including the todo with the updated comment
return todos.map(todo => {
// First find the todo you want
if (todo.id === todoId) {
// Then iterate through its comments
todo.comments.forEach(comment => {
// Find the comment you want to update
if (comment.id === commentId) {
// and update it
comment.text = commentText;
}
});
}
// Return the todo whether it's been updated or not
return todo;
});
default:
return todos;
}
};
export default todoReducer;
As for your payloads, you can make them whatever you want, and they'll be created in your action creator. For example, here's an implementation of ADD_TODO that gives the todo a unique ID, timestamps it, and adds an empty comments array before firing the action:
import uuid from 'node-uuid';
const addTodo = ({title, body}) => {
const id = uuid.v4();
const date = new Date().getTime();
return {
type: 'ADD_TODO',
todo: {
id,
title,
body,
date,
comments: []
}
};
};
Your ADD_COMMENT action creator might look something like this:
import uuid from 'node-uuid';
const addComment = ({todoId, commentorId, commentText}) => {
const id = uuid.v4();
const date = new Date().getTime();
return {
type: 'ADD_COMMENT',
todoId,
comment: {
id,
commentorId,
date,
text: commentText
}
};
};
This is untested but hopefully gives you an idea.