How to put data from json response in an array in reactjs - node.js

Question

im trying to show images from the database and loop through them with a map. Here is the code:
class Container extends React.Component
{
state ={
userData:[]
}
fethData= async()=>{
fetch("http://localhost:5000/user") // could be any rest get url
.then(response => response.json())
.then(result =>
this.setState({
userData: result
})
);
}
componentDidMount() {
this.fethData();
alert(this.state.userData);
$(function(){
//Make every clone image unique.
var counts = [0];
var resizeOpts = {
handles: "all" ,autoHide:true
};
$(".dragImg").draggable({
helper: "clone",
//Create counter
start: function() { counts[0]++; }
});
$("#dropHere").droppable({
drop: function(e, ui){
if(ui.draggable.hasClass("dragImg")) {
$(this).append($(ui.helper).clone());
//Pointing to the dragImg class in dropHere and add new class.
$("#dropHere .dragImg").addClass("item-"+counts[0]);
$("#dropHere .img").addClass("imgSize-"+counts[0]);
//Remove the current class (ui-draggable and dragImg)
$("#dropHere .item-"+counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging");
$(".item-"+counts[0]).dblclick(function() {
$(this).remove();
});
make_draggable($(".item-"+counts[0]));
$(".imgSize-"+counts[0]).resizable(resizeOpts);
}
}
});
var zIndex = 0;
function make_draggable(elements)
{
elements.draggable({
containment:'parent',
start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
stop:function(e,ui){
}
});
}
});
}
changeColor(params) {
this.setState({
color: params.target.value
})
}
changeSize(params) {
this.setState({
size: params.target.value
})
}
render() {
return (
<div className="container">
<div className="tools-section">
<div className="color-picker-container">
Select Brush Color :
<input type="color" value={this.state.color} onChange={this.changeColor.bind(this)}/>
</div>
<div className="brushsize-container">
Select Brush Size :
<select value={this.state.size} onChange={this.changeSize.bind(this)}>
<option> 5 </option>
<option> 10 </option>
<option> 15 </option>
<option> 20 </option>
<option> 25 </option>
<option> 30 </option>
</select>
</div>
</div>
<div className="board-container">
<h4>Select picture!</h4>
{this.state.userData.map((data) => (
<div class="dragImg">
<img src={data.picture} class="img"/> // column data received
</div>
))}
<div id="dropHere">
<Board color={this.state.color} size={this.state.size}></Board></div>
</div>
</div>
);
}
}
export default Container
I would like to put data from function fethData into userData array. But when i run the website i get an alert that userData is undefined. Why is nothing added to userData?
This is the json data fetched from the database:
[{"idpictures":1,"picture":"images/kitten.jpg","title_picture":"Cat"},{"idpictures":2,"picture":"images/puppy.jpg","title_picture":"Dog"}]
I would like the data to be stored like this:
userData:[{idpictures:1,picture:"images/kitten.jpg",title_picture:"Cat"}]
Guys I solved it. This is what I changed about my code:
constructor(){
super();
this.state ={
userData:[]
}
}
async componentDidMount() {
const url = "http://localhost:5000/user";
const response = await fetch(url);
const data = await response.json();
this.setState({userData: data});
console.log(this.state.userData);
if (this.state.userData) {alert(this.state.userData)}

Answer 1

You should define the state of the component in the constructor. Also all data fetching in JS is asynchronous. Notice the .then in the fetch function you wrote. It contains code that will be executed once the response comes back.
class Container extends React.Component
{
constructor(props) {
super(props)
this.state ={
userData:[]
}
}
fethData = async() => {
fetch("http://localhost:5000/user") // could be any rest get url
.then(response => response.json()) // you might not need this, depends on the response
.then(result =>
this.setState({
userData: result
})
);
}
componentDidUpdate() {
alert(this.state) // This should show your data (when it gets here)
}
componentDidMount() {
this.fethData();
alert(this.state.userData); // this will fire before the response from localhost:5000/user gets here
}
}
export default Container

Answer 2

Here is the working example
fethData= ()=>{
return new Promise((resolve, reject)=>{
fetch("http://localhost:5000/user") // could be any rest get url
.then(response => response.json())
.then(result =>
this.setState({userData: result},()=>{
resolve();
})
);
})
}
async componentDidMount(){
await this.fetchData();
alert(this.state.userData);
}

Answer 3

ReactJS is different from Vue, use: this.state.userData to access userData. And fetchData is a asynchronous function, you can't get it's result synchronously.