Unable to use axios post request response outside of function-CodePudding

Using React & Axios. My post request response is an array of arrays, the second element of nested array is string I am trying to load onto a div through using map. Error is 'undefined is not iterable' I am trying to use useState to use the array outside of post request. The entire section opens with useState via a button and by default is closed/not loaded. There is also a user input which the post request uses to get it data, all of that works fine. I am just unable to map the string from the array into a div. I tried to use window.var to access it but this was unsuccessful as well. Appreciate any help!

import './Turnersdiscoverybody.css'
import axios from 'axios'
import { useState, useEffect } from 'react';
import React, { Component } from 'react'
import Turnershomenav from "../../../components/homepage/homepage-components/Turnershomenav.js";
import orangegtr1 from './turnersdiscovery-images/orangegtr-1.jpg'
import searchicon from './turnersdiscovery-images/searchicon.png'
export default function Turnersdiscoverybody() {


    const [showSearchForm, setShowSearchForm] = useState('noForm')
    const [input, setInput] = useState['']
    //functions for opening and closing search feature

    const handleClick = () => {
        setShowSearchForm('showForm')
    }
    const handleClickBack = () => {
        setShowSearchForm('noForm')
    }


    //axios post request starts

    //function that handles searching the documents with the user input, using axios

    const handleSearch = (e) => {
        let userQuery = document.getElementById('userInput').value

        e.preventDefault()
        axios.post(`http://localhost:8081/getDocumentdata/${userQuery}`)
            .then(res => {
                setInput(res.data)
                console.log(res.data)
            })

    }


    //axios post request ends

    return (
        <div>
            <div className="turnersdiscoverynav">
                <Turnershomenav />
            </div>
            <div className='backgroundimg-container'>
                <img src={orangegtr1} alt="background-img" className='turnersdiscovery-backgroundimg'></img>
            </div>
            {showSearchForm === 'showForm' &&
                <>
                    <img className="img-btn-search" alt="search icon" src={searchicon} onClick={handleClickBack}></img>
                    <div className='form-search-container'>
                        <div className='form-search-container-top'>
                            <input
                                id="userInput"
                                required
                                type="text"
                                placeholder='enter your query'
                            ></input>
                            <button onClick={handleSearch}>hello click me for stuff</button>
                        </div>

                        <div className='form-search-container-bottom'>
                            <div className='form-search-container-bottom-content'>
                                {input.map((data) => (
                                    <div>{data[1]}</div>
                                )
                                )}
                            </div>
                        </div>

                    </div>
                </>
            }
            {showSearchForm === "noForm" && <img className="img-btn-search" alt="search icon" src={searchicon} onClick={handleClick}></img>}
        </div>
    )
}

CodePudding user response：

You have some errors in your code:

//1 => const [input, setInput] = useState([])
//2 => check if inputs is not empty then map!

Now your code must be like this:

export default function Turnersdiscoverybody() {
const [showSearchForm, setShowSearchForm] = useState('noForm')
const [input, setInput] = useState([]);
const [empty, setEmpty] = useState(false);
//functions for opening and closing search feature
const handleClick = () => {
    setShowSearchForm('showForm')
}
const handleClickBack = () => {
    setShowSearchForm('noForm')
}


//axios post request starts

//function that handles searching the documents with the user input, using axios

const handleSearch = (e) => {
    let userQuery = document.getElementById('userInput').value
    e.preventDefault()
    axios.post(`http://localhost:8081/getDocumentdata/${userQuery}`)
        .then(res => {
            if(res && res.length > 0){
             setInput(res.data)
             setEmpty(false)
             }else{
              setEmpty(true)
              }
            console.log(res.data)
        })

}

return (
    <div>
        <div className="turnersdiscoverynav">
            <Turnershomenav />
        </div>
        <div className='backgroundimg-container'>
            <img src={orangegtr1} alt="background-img" 
 className='turnersdiscovery-backgroundimg'></img>
        </div>
        {showSearchForm === 'showForm' &&
            <>
                <img className="img-btn-search" alt="search icon" src={searchicon} onClick={handleClickBack}></img>
                <div className='form-search-container'>
                    <div className='form-search-container-top'>
                        <input
                            id="userInput"
                            required
                            type="text"
                            placeholder='enter your query'
                        ></input>
                        <button onClick={handleSearch}>hello click me for stuff</button>
                    </div>

                    <div className='form-search-container-bottom'>
                        <div className='form-search-container-bottom-content'>
                           {empty ? <p>Nothing Found </p> : 
                                 <>
                                                                 
                        {input.length > 0 && input.map((data, index) => (
                                <div>{data[1]}</div>
                            )
                            )}
                                </>
                             }
                        </div>
                    </div>

                </div>
            </>
        }
        {showSearchForm === "noForm" && <img className="img-btn-search" alt="search icon" src={searchicon} onClick={handleClick}></img>}
    </div>
   )
 }

CodePudding user response：

const [input, setInput] = useState['']

should be

const [input, setInput] = useState('')

P.s. if you run into more issues, a minimal code reproduction would be good, somewhere like codepen or codesandbox.

CodePudding user response：

const [input, setInput] = useState[''] should have been const [input, setInput] = useState([])