Javascript, Type Error : Information.map is not a function || How to use .map?

Question

im currently learning on crud react with express and node. i have success on inserting data to database but i've confuse when i want to represent the data i got error when i use .map, you can see on the <Input onClick="{getCRUD}" below .. the error i get is , im trying change the Information.map with [Information].map but its not showing any data that i need iread that .map is used for array TypeError: Information.map is not a function

this i my code. pls help.

import './App.css';
import React, { useState } from 'react';
import axios from 'axios';




function App() {
  const [Name, setName] = useState ("");
  const [Subject, setSubject] = useState (""); 
  const [Message, setMessage] = useState ("");
  const [Information, setInformation] = useState ("");
  

  const addCRUD = () => {
    
    axios.post('http://localhost:3001/create',{
      Name: Name,
      Subject: Subject,
      Message: Message}).then(() => {
        console.log("Success")
         })
  }

  const getCRUD = () => {
    axios.get('http://localhost:3001/DATA').then((response) => {
        setInformation(response.data)
         })
  }


  return (
    <div className="App">
      <div className="container">
      <form>
        <div className="input-group">
          <span className="input-group-addon"><i className="glyphicon glyphicon-user"></i></span>
          <input onChange={(event)=> {
            setName(event.target.value);
          }} id="Name" type="text" className="form-control" name="Name" placeholder="Name"/>
        </div>
        <div className="input-group">
          <span className="input-group-addon"><i className="glyphicon glyphicon-comment"></i></span>
          <input onChange={(event)=> {
            setSubject(event.target.value);
          }}id="Subject" type="subject" className="form-control" name="subject" placeholder="Subject"/>
        </div>
        <div className="input-group">
          <span className="input-group-addon">Message</span>
          <input onChange={(event)=> {
            setMessage(event.target.value);
          }}id="Message" type="text" className="form-control" name="Message" placeholder="Message"/>
        </div>
      
      </form>
      <div className="input-group"> 
          <input onClick={addCRUD}
          id="btn" type="button" className="btn btn-warning" name="btn" placeholder="Submit" value="Submit"/>
        </div>
      </div>
      
      <div className="input-group">
      <input onClick={getCRUD}
      id="btn" type="button" className="btn btn-primary" name="btn" placeholder="Show Data" value="show data"/>
      {Information.map((val,key) => {
        return (
          <div> 
            <h3>
              Name: {val.Name}
            </h3>
          </div>
        )
      }
      )}
      </div>   

    </div>
  );
}

export default App;

the error that i got 62 |

63 | <input onClick={getCRUD} | ^ 64 | id="btn" type="button" className="btn btn-primary" name="btn" placeholder="Show Data" value="show data"/> 65 | {Information.map((val,key) => { 66 | return ( TypeError: Information.map is not a function

errors I got

Answer 1

place your data on an array:

const [Information, setInformation] = useState([]);

Answer 2

Your data must be an array to apply map on.

const [Information, setInformation] = useState([]);

Answer 3

You need to set an array instead of a string as the initial value.

Likewise your response.data should be an array as well.

const [Information, setInformation] = useState ([]);