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;
  }
};

fieldItems doesn't appear to be defined in InspectionsForm. Looks like you need to use a useSelector hook and pick out the getcarinspectiondetails array from state you want to render. — Drew Reese
– Drew Reese, Commented Jun 25, 2021 at 16:38
I also pass is as parameter in dispatch(CarAction.getInspectedCar(fieldItems)); but it still give same error. — Umer Waqas
– Umer Waqas, Commented Jun 25, 2021 at 16:40
I think you're missing some reat-redux basics. the getInspectedCar doesn't consume any arguments. Can you update how you configure your store, i.e. where the CarReducer is combined into a root reducer for the store? — Drew Reese
– Drew Reese, Commented Jun 25, 2021 at 16:42

Drew Reese · Accepted Answer · 2021-06-25 16:54:25Z

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.

Collectives™ on Stack Overflow

render data in component which getting from react redux?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related