Uncaught (in promise) AxiosError 
{message: 'Request failed with status code 404', name: 'AxiosError', 
code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

import axios from 'axios';
const url = 'http://localhost:1337/reviews';
export const readReviews = () => axios.get(url);
export const createReview = (newReview) => axios.post(url, newReview);

import React, { useState, useEffect } from 'react';
import * as api from './api';
import './styles/reviews.css';
import { FaStar } from 'react-icons/fa';
const colors = {
    orange: '#FFBA5A',
    grey: '#a9a9a9',
function App() {
    const stars = Array(5).fill(0);
    const [currentValue, setCurrentValue] = React.useState(0);
    const [hoverValue, setHoverValue] = React.useState(undefined);
    const handleClick = (value) => {
        setCurrentValue(value);
    const handleMouseOver = (value) => {
        setHoverValue(value);
    const [review, setReview] = useState({});
    const [reviews, setReviews] = useState([]);
    useEffect(() => {
        const fetchData = async () => {
            const result = await api.readReviews();
            //console.log(result);
            setReviews(result.data);
        fetchData();
    }, []);
    const createReview = async () => {
        try {
            //console.log(review);
            const data = await api.createReview(review);
            setReview([...reviews, data]);
        } catch (error) {
            //console.log(error);
    let [reviewCount, setreviewCount] = useState([]);
    const setCountFxn = (no) => {
        setReview(no);
    return (
                <div style={styles.container}>
                    <h2>RATE OUR SERVICE</h2>
                    <div style={styles.stars}>
                        {stars.map((_, index) => {
                            return (
                                <FaStar
                                    key={index}
                                    size={24}
                                    style={{
                                        marginRight: 10,
                                        cursor: 'pointer',
                                    color={(hoverValue || currentValue) > index ? colors.orange : colors.grey}
                                    onClick={() => {
                                        setReview({ ...review, Rating: index + 1 });
                                    onMouseOver={() => handleMouseOver(index + 1)}
                        <input
                            type='text'
                            placeholder='input your name'
                            required
                            style={styles.input}
                            value={review.Name}
                            onChange={(e) => setReview({ ...review, Name: e.target.value })}
                    <textarea
                        placeholder="what's your feedback"
                        required
                        style={styles.textarea}
                        value={review.review}
                        onChange={(e) => setReview({ ...review, review: e.target.value })}
                    <button type='submit' style={styles.button} className='btn btn-primary' onClick={createReview}>
                        submit
                    </button>
            </form>
            <section id='reviews'>
                <div className='reviews-heading'>
                    <span>REVIEWS FROM CUSTOMERS</span>
                <div className='container'>
                    <div className='row'>
                        {reviews.map(
                                review,
                                i // calling the api
                            ) => (
                                <div className='col-md-6'>
                                    <div className='reviews-box'>
                                        <div className='box-top'>
                                            <div className='profile'>
                                                <div className='name-user'>
                                                    <strong>{review.Name}</strong>
                                            <div style={styles.stars}>
                                                {Array.from({ length: review.Rating }).map((i) => (
                                                    <FaStar key={i} size={18} color={colors.orange} />
                                        <div className='client-comment'>{review.review}</div>
            </section>
const styles = {
    container: {
        align: 'center',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        boxShadow: '0 0 20px 0 #999',
        width: '30%',
        margin: '50px auto',
    input: {
        borderRaduis: 5,
        width: 300,
        margin: '10px 0',
        marginDown: '15px',
        minHeight: 30,
        padding: 1,
        height: '20px',
    textarea: {
        border: '1px solid #a9a9a9',
        borderRaduis: 5,
        width: 300,
        margin: '20px 0',
        minHeight: 100,
        padding: 10,
    button: {
        border: '1px solid #a9a9a9',
        borderRaduis: 5,
        width: 300,
        padding: 10,
        margin: '20px 0',
export default App;

*Uncaught TypeError: reviews.map is not a function
 at App (App.js:102:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateFunctionComponent (react-dom.development.js:19588:1)
    at beginWork (react-dom.development.js:21601:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
App @ App.js:102
renderWithHooks @ react-dom.development.js:16305
updateFunctionComponent @ react-dom.development.js:19588
beginWork @ react-dom.development.js:21601
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
flushSyncCallbacksOnlyInLegacyMode @ react-dom.development.js:12021
scheduleUpdateOnFiber @ react-dom.development.js:25541
dispatchSetState @ react-dom.development.js:17527
fetchData @ App.js:30
await in fetchData (async)
(anonymous) @ App.js:32
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984