render data in component which getting from react redux?

Question

I'm new in react and working to get data from redux and render in component.

The issue is that I'm calling API using Axios in the CarAction.js file and managing my state in CarReducer.js and I want to render data in the InspectionFom.js file in div. I'm already getting data in console now just want to render in table.

Here is the code of the InspectionFom.js file in which I want to render my data in a table and I have an import CarAction.js file and calling Action using the dispatch method. I tried to get data using the map function but it's giving me an error.

        import { CarAction } from "../../Store/Actions/CarAction";
        import { useDispatch, useSelector } from "react-redux";
    
        const InspectionsForm = () => {
            const dispatch = useDispatch();

          useEffect(() => {
        dispatch(CarAction.getInspectedCar());
      }, [dispatch]);
    
          return (
          <div>
          <div className="table-responsive">
              <table className="table">
                <thead>
                  <tr>
                    <th>Fields</th>
                    <th>Original</th>
                    <th>Repaint</th>
                    <th>PR</th>
                    <th>N/C</th>
                  </tr>
                </thead>
                <tbody>
                  {fieldItems.map((item) => {
                    return (
                      <tr>
                        <td>{item.name}</td>
                        <td>
                          <Form.Check
                            className="radio-size"
                            type="radio"
                            aria-label="radio 1"
                            value="original"
                            name="field"
                          />
                        </td>
                        <td>
                          <Form.Check
                            className="radio-size"
                            type="radio"
                            aria-label="radio 1"
                            value="repaint"
                            name="field"
                          />
                        </td>
                        <td>
                          <Form.Check
                            className="radio-size"
                            type="radio"
                            aria-label="radio 1"
                            value="PR"
                            name="field"
                          />
                        </td>
                        <td>
                          <Form.Check
                            className="radio-size"
                            type="radio"
                            aria-label="radio 1"
                            value="N/C"
                            name="field"
                          />
                        </td>
                      </tr>
                    )
                  })}
    
                </tbody>
              </table>
    </div>
    
          );
    
    };

Here is the code of CarAction.js

     export const CarAction = {

      getInspectedCar() {
    try {
      return (dispatch) => {
        return axiosInstance
          .post(`user/carRequest/getCarInspectionDetail/1`)
          .then((res) => {
            if (res.data.status === "success") {
              console.log("Successfull Inspection", res.data.data);
              return dispatch({
                type: Constant.getCarInspectionDetails,
                payload: res.data.data,
              });
            }
          })
          .catch((error) => {
            console.log("Unsuccessfull Inspection", error);

          });
      };
    } catch (e) {
      console.log("Exception Car Action", e);
    }
  },
  }

Here is the code of CarReducer.js:

        const INITIAL_STATE = {
  getcarinspectiondetails: []
};
export default (state = INITIAL_STATE, action) => {
  switch (action.type) {

        case Constant.getCarInspectionDetails:
      return {
        ...state,
        getcarinspectiondetails: action.payload
      }

          default:
      return state;
  }
};

Answer 1

Looks like you are missing pulling data out of your store. Since you are using a functional component you can use the useSelector hook from react-redux.

useSelector "Allows you to extract data from the Redux store state, using a selector function."

import { useDispatch, useSelector } from 'react-redux';

const InspectionsForm = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(CarAction.getInspectedCar());
  }, [dispatch]);

  // Select the getcarinspectiondetails state
  const fieldItems = useSelector(
    state => state.carReducer.getcarinspectiondetails // *
  );

  return (
    <div>
      <div className="table-responsive">
        <table className="table">
          <thead>
            ...
          </thead>
          <tbody>
            {fieldItems.map((item) => {
              return (

* NOTE: This is assuming your carReducer is combined at the root of your state. Your actual state structure may be different.