Develop Reference

setting state within nested response

I am building a react app and I am setting the state with api of nested response of nested state But the state is not setting the way I want.
response that is receiving from api
[
{
"id": 70,
"title": "feefifef",
"images": [
{
"id": 28,
"text": "First Image"
"blog_id": 70,
},
{
"id": 28,
"text": "First Image",
"blog_id": 70,
}
]
}
]
App.js
class App extends React.Component {
constructor(props){
super(props)
this.state = {
blogs = [
{
id: 0,
title: "",
images: [
{
id:0,
text:""
}
]
}
]
}
}
componentDidMount() {
let data;
axios.get('http://127.0.0.1:8000/api/blogs/').then((res) => {
data = res.data;
this.setState({
blogs: data.map((blog) => {
return Object.assign({}, blog, {
id: blog.id,
title: blog.title,
images: blog.images,
}
})
})
})
}
render() {
const blogs = this.state.blogs.map((blog) => (
<BlogList
id={blog.id}
title={blog.title}
images={blog.images}
/>
))
}
return (
<div>{blogs}</div>
)
}
class BlogList extends React.Component {
constructor(props){
super(props)
}
return (
<div>
Title: {this.props.title}
Images: {this.props.images}
</div>
)
}
What is the problem ?
Images are not showing after Title. I am trying to show all images in BlogList class of every blog.
I have also tried using (in BlogList class)
this.props.images.map((img) => {
return (
<div>
Title: {this.props.title}
Images: {img.text}
</div>
)
}
But it showed me
this.props.images.map is not a function.
then I think the problem is with setting state of images (I may be wrong).
When I tried to print this.props.images then it is showing
0: {id: 28, text: '1111', blog_id: 71}
length: 1
[[Prototype]]: Array(0)
I am new in react, Any help would be much Appreciated. Thank You in Advance

this.props.images is an array and hence you can't use {this.props.images} directly. Other wise you will get an error like this "Objects are not valid as a React child. If you meant to render a collection of children, use an array instead"
You have to use something like this
render() {
return (
<div>
Title: {this.props.title} <br/>
Images:
{this.props.images?.map((image, i) => (
<div key={image.id}>
{image.id}<br/>
{image.text}<br/>
{image.blog_id} <br/>
</div>
))}
</div>
);
}

Error: Objects are not valid as a React child. If you meant to render a collection of children, use an array instead. Getting data from JSON

guys! I'm using ReactJS to create a small website. Since I added the following code it starts showing an error: Objects are not valid as a React child. If you meant to render a collection of children, use an array instead.
Code:
import { useState, useEffect } from 'react';
import { motion, useAnimation } from 'framer-motion';
import './css/App.min.css';
import config from './config';
function App() {
return (
<div className="myskills">
<Skills skillType="coding" />
</div>
);
}
function Skills(props){
const skillType = props.skillType;
const result = config.skills.filter(skill => skill.cat == skillType);
console.log(result);
result.map((skill, index) => (
<div className="singleSkill" key={index}>
{skill.name} Level: {skill.level}
</div>
));
return (<div>{result}</div>);
}
config.json
{
"skills": [
{
"name": "HTML",
"level": 5,
"cat": "coding"
},
{
"name": "CSS",
"level": 5,
"cat": "coding"
},
{
"name": "PHP",
"level": 4,
"cat": "coding"
}
]
}
Any ideas what's the problem?

The return statement in your Skills component is basically just this:
return (config.skills.filter(skill => skill.cat == skillType));
hence the "Objects are not valid as a React child" error.
Since result.map doesn't modify the original array, a better solution might look something like this:
function Skills(props) {
const skillType = props.skillType;
const result = config.skills.filter(skill => skill.cat == skillType);
return (
<div>
{result.map((skill, index) => (
<div className="singleSkill" key={index}>
{skill.name} Level: {skill.level}
</div>
))}
</div>
);
}

Creating a table in React from JSON inputed from Flask

I am trying to make a table in React from the response I've got from my flask app. The code I am using is below. Please could someone help me? I am unsure as to where to start and how to do it.
import React, { Component } from "react";
import { render } from "react-dom";
import axios from "axios";
class Data extends Component {
constructor() {
super();
this.state = {
products: ""
};
}
componentDidMount() {
this.getDataAxios();
}
async getDataAxios() {
const response = await axios.get("http://141.123.1:5000/product");
this.setState({ products: response.data });
}
render() {
return (
<div>
<h1>response data</h1>
</div>
);
}
}
export default Data;
and the input from the local server is:
"products": [
{
"action": "update",
"id": 2,
"object_identifier": 20,
"object_type": "meal",
"s3_location": "location-110"
},
{
"action": "update",
"id": 3,
"object_identifier": 20,
"object_type": "meal",
"s3_location": "location-120"
},
{
"action": "update",
"id": 4,
"object_identifier": 60,
"object_type": "meal",
"s3_location": "location-1120"
},
{
"action": "update",
"id": 5,
"object_identifier": 70,
"object_type": "meal",
"s3_location": "location-1323120"
}
]
as an extra and rather cheeky question, I am unsure right now how to get my flask rest api to work without using Moesif CORS. Does anyone know a way?
Thank you so much for the help as always.
//A

Map the data if it exists
render() {
return (
<div>
<h1>response data</h1>
{this.state.products && this.state.products.length > 0 && this.state.products.map(product => <Product {...product} />)}
</div>
);
}
}
Make a Product component that renders 1 product and put it in here. Then fill it with data you get from each iteration of the array.

TypeError: variable is undefined despite being able to log the variable correctly

I'm trying to get a simple list of lessons contained in a course from an endpoint.
If I try console.log(this.state.course.lessons) an array contained 3 items is displayed.
However,if I try console.log(this.state.course.lessons.map(//function) I keep getting
TypeError: this.state.course.lessons is undefined
How can I map a function to the lessons array so I can render them as a list.
component
import React, { Component } from 'react'
export class CourseDetail extends Component {
constructor(props) {
super(props);
this.state = {
course: []
};
}
componentDidMount() {
fetch(`http://127.0.0.1:8000/api/courses/${this.props.match.params.id}`)
.then(res => res.json())
.then((course) => {
this.setState({
course: course,
});
console.log(this.state.course.lessons)
});
}
render() {
return (
<div>
{this.state.course.lessons.map((lesson)=>(console.log(lesson)))}
<h1>{this.state.course.title}</h1>
</div>
)
}
}
export default CourseDetail
json returned from end point
{
"id": 1,
"lessons": [
1,
2,
3
],
"owner": 1,
"rating": 0,
"title": "Course 1",
"description": "course 1 desc",
"pub_date": "2019-11-23",
"is_live": false,
"category": 1
}

Most obvious solution would be just to give the object a default state if you want to access it:
constructor(props) {
super(props);
this.state = {
course: {
lessons: []
}
};
}

The problem on your code is the life cycles (Mount-> Render-> DidMount), and in this render, u have not fetch the data yet.
You can try this:
render() {
if (!this.state.course.lessons) return null //this line
return (
<div>
{this.state.course.lessons.map((lesson)=>(console.log(lesson)))}
<h1>{this.state.course.title}</h1>
</div>
)
}

How do I load data file to state array in react?

I'm new to react.And I'm trying to load data file to a state array instead of directly placing array of data in the state.Below I've placed the code.But this doesn't display the data.
App.js
import React, { Component } from 'react';
import Projects from './Components/Projects';
import data from './data/data'
class App extends Component {
constructor(){
super();
this.state = {
myArrays: [{data}]
}
}
render() {
return (
<div className="App">
<Projects myArrays = {this.state.myArrays} />
</div>
);
}
}
export default App;
It works if I replace
<Projects myArrays = {this.state.myArrays} /> with <Projects myArrays = {data} />
What is the difference between doing this two? And why doesn't it load data with
<Projects myArrays = {this.state.myArrays} />
Project.js
import React, { Component } from 'react';
class Projects extends Component {
render() {
let projectItems;
projectItems = this.props.myArrays.map((project,i) =>{
return(
<li key = {i}>{project.title}</li>
);
});
return (
<ul>
{projectItems}
</ul>
);
}
}
export default Projects;
data.js
export default [
{
title: "Obama set for first political event since leaving office",
category: "politics"
},
{
title: 'La Liga refuse to accept PSG payment for Barcelona striker Neymar',
category: "sports"
},
{
title: "Virtu Financial closes KCG's European prop trading business",
category: "business"
}
]

The difference between
<Projects myArrays = {this.state.myArrays} />
and
<Projects myArrays = {data} />
is the way you are assigning data to the state
this.state = {
myArrays: [{data}]
}
This will result in this.state.myArrays which looks like
[{data: [
{
title: "Obama set for first political event since leaving office",
category: "politics"
},
{
title: 'La Liga refuse to accept PSG payment for Barcelona striker Neymar',
category: "sports"
},
{
title: "Virtu Financial closes KCG's European prop trading business",
category: "business"
}
]
}]
Replace it with
this.state = {
myArrays: data
}
and your first version will also work