React response get data

Question

I wanted to add the data of a Axios response into my useState Array. The problem is that I don't know how to get the data out of the then() function. Basically what I want to do is save the Axios response so that I can use it in my Array. (I'm trying React for the first time)

for (var i = 1; i <= props.max; i++) {
    const response = Axios.get("http://localhost:3001/content", {id: 1});
    response.then((res) => {
      console.log(res.data[0].title)
    })
    blogs.push({title: "TITLE HERE", text: "text", author: "author", date: "date"}); //I want to insert the title here
}

I already tried:

const [title, setTitle] = useState();
for (var i = 1; i <= props.max; i++) {
    const response = Axios.get("http://localhost:3001/content", {id: 1});
    response.then((res) => {
      setTitle(res.data[0].title)
    })
}

Heres the complete function:

import React, { useEffect, useState, express, memo } from "react";
import './network.css';
import Axios from 'axios';

function Content(props) {   
  const [blogs, setBlogs] = useState([]);
  const [title, setTitle] = useState();
  /**const [text, setText] = useState();
  const [author, setAuthor] = useState();
  const [date, setDate] = useState();*/
  

  for (var i = 1; i <= props.max; i++) {
    const response = Axios.get("http://localhost:3001/content", {id: 1});
    response.then((res) => {
      console.log(res.data[0].title)
    })
    blogs.push({title: "TITLE", text: "text", author: "author", date: "date"}); //I want to insert the title here
  }
  

    return (
      <div>
      {blogs.map((blog) => (
      <div class="card">
      <div class="card-body">
        <h4>{blog.title}</h4>
        <p>{blog.text}</p>
        <div class="user">
          <img alt="user" id="image"/>
          <div class="user-info">
            <h5>{blog.author}</h5>
            <small>{blog.date}</small>
          </div>
        </div>       
      </div>
  </div>
  ))} 
  </div>
  ); 
  
}

export default Content;

Answer 1

Please add your fetch logic on useEffect hook. Otherwise, fetch logic will be executed in every re-render.

Your app may get frozen.

And you should not change state variable blogs by blogs.push....

use setBlogs function.

And please use className instead of class in DOM.

I see many problems in the code and strongly to read react help before writing any code.

Anyway updated code is here.

function Content(props) {
  const [blogs, setBlogs] = useState([]);
  const [title, setTitle] = useState();
  /**const [text, setText] = useState();
   const [author, setAuthor] = useState();
   const [date, setDate] = useState();*/


  useEffect(() => {
    for (var i = 1; i <= props.max; i++) {
      const response = Axios.get("http://localhost:3001/content", {id: 1});
      response.then((res) => {
        setBlogs(res.data);
      })
    }
  }, []);




  return (
    <div>
      {blogs.map((blog, key) => (
        <div className="card" index={key}>
          <div className="card-body">
            <h4>{blog.title}</h4>
            <p>{blog.text}</p>
            <div className="user">
              <img alt="user" id="image"/>
              <div className="user-info">
                <h5>{blog.author}</h5>
                <small>{blog.date}</small>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );

}

export default Content;