.map() React undefined - Axios & Express - node.js

Question

Keep getting this error when trying to submit a form in React
Uncaught TypeError: queryList.map is not a function
This is the code:
const [query, setQuery] = useState();
const [queryList, setQueryList] = useState([]);
const [response, setResponse] = useState([]);
const [responseList, setResponseList] = useState([]);
const createQuery = () =>{
setQueryList(
{query}
);
alert(queryList)
Axios.post('http://localhost:3001/createQuery', {
query
}).then((res)=>{
setResponse(res)
setResponseList(...responseList, {res})
})
}
return(
<div>
{queryList && queryList.map((e) => {
return(
<p className="ml-52 text-white text-xl">{e.query}</p>
)
})}
<form>
<textarea onChange={(event)=>{
setQuery(event.target.value)
}}
type="text" name="name" autoComplete="off" placeholder="Ask a question" className = "caret-gray-200 bg-gray-800 shadow-md h-20 w-5/6 inset-x-0 bottom-6 absolute left-36 items-center snap-center text-xl p-6" />
<button onClick={createQuery} type="submit" name="submit" className="text-white inset-x-0 bottom-6 absolute bg-transparent w-20 h-20 ml-auto mr-28 focus:outline-none focus:none">
<AiOutlineSend size="28" />
</button>
</form>
</div>
)
After I submit the form, I need the query mapped
I know I didn't mention any other errors, but if you see them, please let me know!
By the way, all the other posts didn't work for me.
Thanks :)

Answer 1

When you set the queryList you will need to set it to an array by using array brackets. Also by the name i'm assuming you want an array of all queries so you will need to include previous queries that are already stored in queryList.
setQueryList([...queryList, { query }]);
This is what your setter function should look like.
Aside from this the alert function will not work since queryList is not updated in time to be used so I would recommend you to just use query in alert instead of queryList.
Also because of the way you use forms the page will be redirected, this is solved by using onSubmit event and using the preventDefault() function.
const [query, setQuery] = useState();
const [queryList, setQueryList] = useState([]);
const [response, setResponse] = useState();
const [responseList, setResponseList] = useState([]);
const createQuery = (event) => {
event.preventDefault();
setQueryList([...queryList, { query }]);
alert(query);
Axios.post('http://localhost:3001/createQuery', {
query,
}).then((res) => {
setResponse(res);
setResponseList(...responseList, { res });
});
};
return (
<div>
{queryList &&
queryList.map((e) => {
return (
<p className='ml-52 text-white text-xl'>{e.query}</p>
);
})}
<form onSubmit={createQuery}>
<textarea
onChange={(event) => {
setQuery(event.target.value);
}}
type='text'
name='name'
autoComplete='off'
placeholder='Ask a question'
className='caret-gray-200 bg-gray-800 shadow-md h-20 w-5/6 inset-x-0 bottom-6 absolute left-36 items-center snap-center text-xl p-6'
/>
<button
type='submit'
name='submit'
className='text-white inset-x-0 bottom-6 absolute bg-transparent w-20 h-20 ml-auto mr-28 focus:outline-none focus:none'
/>
</form>
</div>
);
I have not tested anything with axios but this code should work.