[SOLVED] using map function and getting this error companies1.map is not a function React JS

Issue

I am trying to fetch data from MySQL database and I am using the map function

const [companies, setCompanies] = useState([]);
useEffect(() => {
    getCompany();
}, []);

const getCompany = async () => {
    const companies = await axios.get('http://localhost:8080/companies');
    setCompanies(companies.data);
};

This is the code of fetching data and this is how I am retrieving it in frontend

   <article className="ps-block--store-2">
            <div
                className="ps-block__content bg--cover"
                style={{
                    background: `url('/static/img/vendor/store/default-store-banner.png')`,
                }}>
                <figure>
                    {companies.map((company) => (
                        <h4>
                            <Link
                                // href="/store/[slug]"
                                // as={`/store/${source.slug}`}
                                >
                                <a>{company.company_name}</a>
                            </Link>
                        </h4>
                    ))}                  
                    <div className="ps-block__rating">
                        <Rating />
                    </div>
                </figure>
            </div>
        </article>

but it throws this error

 1 of 1 unhandled error

Unhandled Runtime Error
TypeError: companies1.map is not a function

Solution

Your code seems fine it must be some error in the backend have you made any show controller in your backend?

Answered By – Ghulam Mustafa

Answer Checked By – Katrina (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published.