TypeError: allOrg.map is not a function [closed] - react-functional-component

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last year.
Improve this question
I am trying to loop through all the objects in a array state in react, hence I used map function. Here is the block of code where I used the map function:
return(
<div>
<Navbar/><br/>
{
allOrg.map((data: orgType, index: number) => {
/*<Org key={index} userId = {UserId} orgName = {data.orgName} /> */
<h1>{index} {UserId} {data.orgName}</h1>
})
}
<div className = "OrgRow">
<button className = "OrgTeams" onClick={createOrg}>Add Org</button>
{createOrgForm}
</div>
</div>
)
But it is showing me "TypeError: allOrg.map is not a function" error. picture of the error I looked for similar errors on stackoverflow, but only suggestions were that map can only be used with arrays. And here my state is an array only, still this problem is persisting. Here is my declaration of the state named "allOrg":
import React,{useState, useEffect} from "react";
import { useForm } from "react-hook-form";
import Navbar from "./navBar";
import Org from "./org";
import "../../style/auth.css";
import "../../style/home.css";
interface orgType{
orgId: string;
orgName: string;
}
function Home(): JSX.Element{
//let UserId: string = "Ronak";
const initialOrg = {
orgId: "",
orgName: ""
}
const [UserId, setUserId] = useState<string>("userId");
const [createOrgForm, setForm] = useState(<div></div>);
const [allOrg, setAllOrg] = useState<orgType[]>([initialOrg]);
const [orgAdded, changeState] = useState(true);
const {register, handleSubmit} = useForm();
I am also pasting images containing my entire code for that component:
import React,{useState, useEffect} from "react";
import { useForm } from "react-hook-form";
import Navbar from "./navBar";
import Org from "./org";
import "../../style/auth.css";
import "../../style/home.css";
interface orgType{
orgId: string;
orgName: string;
}
function Home(): JSX.Element{
//let UserId: string = "Ronak";
const initialOrg = {
orgId: "",
orgName: ""
}
const [UserId, setUserId] = useState<string>("userId");
const [createOrgForm, setForm] = useState(<div></div>);
const [allOrg, setAllOrg] = useState<orgType[]>([initialOrg]);
const [orgAdded, changeState] = useState(true);
const {register, handleSubmit} = useForm();
const submitButton = {
margin: "auto",
marginTop: 30,
display: "block"
}
useEffect(() => {
fetch('/api/v1/auth/verifyJWT', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => {
console.log(data.serviceResponse.userId);
setUserId(data.serviceResponse.userId);
console.log(UserId);
}
)
}, [] )
useEffect( () => {
console.log(UserId);
fetch('/api/v1/org/all/' + UserId)
.then(res => res.json())
.then(data => {
setAllOrg(data);
console.log("Hi");
console.log(data);
console.log(allOrg);
console.log("bye");
}
)}, [UserId]);
function onSubmit(data: any){
fetch('/api/v1/org/create', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(res => res.json())
.then(data => {
console.log(data);
if(data.message == "Created!"){
console.log("successful");
setForm(()=><div></div>);
changeState(!orgAdded);
}
else{
console.log("failed");
}
})
}
function createOrg(){
console.log(UserId);
setForm(()=>
<form className = "auth_form" onSubmit = {handleSubmit(onSubmit)}>
<br/><br/>
<input className = "auth_input" {...register("userId", {required: true})} name="userId" value={UserId}/>
<br/>
<input className = "auth_input" {...register("orgName", {required: true})} name="orgName" placeholder="Organization Name"/>
<br/>
<button className = "auth_button" style={submitButton} type="submit">Create</button>
</form>
)
}
return(
<div>
<Navbar/><br/>
{
allOrg.map((data: orgType, index: number) => {
/*<Org key={index} userId = {UserId} orgName = {data.orgName} /> */
<h1>{index} {UserId} {data.orgName}</h1>
})
}
<div className = "OrgRow">
<button className = "OrgTeams" onClick={createOrg}>Add Org</button>
{createOrgForm}
</div>
</div>
)
}
export default Home;
Line 103 is where I used allOrg.map() and the declaration of allOrg state is at the start of the function.
Any help would be welcome.
P.S. Incase anyone thinks that the allOrg state might be empty, it is not so. I checked using console.log..
Edit: I am adding the ss of console.log of allOrg, console.log(allOrg).

Answer 1

Even if you checked that allOrg is state is not empty it might be possible that component is rendered multiple times where first time allOrg is at initial state for second rendering it might be empty or null or undefined and at last when API call is completed it fills allOrg.
So you have to handle case for when allOrg is null or something.
let orgList;
if(Array.isArray(allOrg)){
orgList = allOrg.map(
...
);
}
render (
...
{orgList}
...
);