React problem elements appear

GOANEX32 · October 25, 2022, 11:58pm

Hello, i need help, i map my cards in my store.reducer but he dont appear directly in my home page , i don t understand .

Notchoaveragejoe · October 26, 2022, 7:12am

Which file are you using to render UI?

GOANEX32 · October 26, 2022, 8:03am

this one (sorry for english)

github.com

GOANEX32/P7groupomania/blob/main/frontend/src/components/Post/Card.js


import LikeButton from "./LikeButton";
import ModifPost from "./modifPostButton";
import Corbeille from "./deletePost";
import {  useSelector } from "react-redux";
import { isEmpty } from "../Utils";
import '../../styles/Card.css';



const Card = () => {
  

  
  const postData = useSelector((store) => store.postReducer);
  const userData = useSelector((state) => state.userReducer);

This file has been truncated. show original

Notchoaveragejoe · October 26, 2022, 10:43am

I’m a tad confused as to what’s going on here. Although I recall you should have an index.js file. That renders the UI using reactDOM.

GOANEX32 · October 27, 2022, 5:38am

github.com

GOANEX32/P7groupomania/blob/main/frontend/src/App.js

import React, { useEffect, useState } from "react";
import { UidContext } from "./components/AppContext";
import Routers from "./components/Routes/index"

import { useDispatch } from "react-redux";
import { getUser } from "./actions/user.action";

const App = () => {
  const [items, setItems] = useState([]);
  const token = localStorage.getItem('token');
  const uid = localStorage.getItem('user')
  const dispatch = useDispatch();
//recup l'id de user connecter dans le localstorage
//les envoiyer a reduce action qui trouve les info dans une requete back
//pour les stocker dans un state utilisable dans tous lapp
  const recup = async () => {
    if (uid) dispatch(getUser(uid))
  }
  recup();

This file has been truncated. show original

Notchoaveragejoe · October 27, 2022, 5:41am

So which file will trigger your UI? Does this look familiar <App />

GOANEX32 · October 27, 2022, 5:54am

github.com

GOANEX32/P7groupomania/blob/main/frontend/src/actions/user.action.js

import axios from "axios";

export const GET_USER = "GET_USER";
export const UPLOAD_PICTURE="UPLOAD_PICTURE"

export const getUser = (uid) => {
    return (dispatch) => {
        return axios
        .get(`${process.env.REACT_APP_API_URL}api/user/${uid}`)
        .then((res) => {
            dispatch({type: GET_USER, payload: res.data})
        })
        .catch((err) => console.log(err));
    }
}


export const uploadPicture = (data, id) => {
    return (dispatch) => {
      return axios

This file has been truncated. show original

Notchoaveragejoe · October 27, 2022, 6:07am

Iam not sure I understand your problem?

GOANEX32 · October 27, 2022, 6:10am

Me too ,
The probleme is when i arrived in my home page website , cards dont appear

Notchoaveragejoe · October 27, 2022, 6:43am

Thats why you must import it to your index.js file and render it using the render method and then reactDOM.render(<Card />, getElementById('root');

GOANEX32 · October 27, 2022, 6:57am

Sorry my english is bad your can explain me simply

Notchoaveragejoe · December 28, 2022, 7:22am

hey, you need to code your react render file, which is done using the App function and rendered in the index.js file

system · June 28, 2023, 7:22pm

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
My list post dont appear JavaScript	1	173	April 22, 2023
React and Redux - Moving Forward From Here JavaScript	3	253	July 27, 2024
Need help with react js	4	383	June 1, 2021
In React .map a state Reducer JavaScript	13	536	May 14, 2023
My code in react Js is not working.. Pls anyone see t JavaScript	2	625	December 19, 2021

React problem elements appear

Related topics