Please I'm using fetch to get data from an API, but only the JSX return without the products. Api is from: http://fakestoreapi.com/docs

See also questions close to this topic

• how to change prettier format for react native

  my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

  from this code

        import { View, Text } from 'react-native'
      
      import React from 'react'
      
      export default function App() {
        return (
          <View>
      
      <Text>Apps</Text>   
  </View>
        )
      }
  

  it's formatted to this

  import {
    View,
    Text
  } from 'react-native'
  
  import React from 'react'
  
  export default function App() {
    return ( <
      View >
  
      <
      Text > Apps < /Text>
  
  
      <
      /View>
    )
  }
  
• MarkLogic server-side JavaScript and XQuery

  I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

  I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
• Popover in chrome extension using js

  My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.

  
• react-router-dom v6 params only numbers

  I want add number regex in may param in react-router-dom v6. it work fin in v5 like it:

   <Route path="list/:id(\d+)" element={<MyComponent/>} /> 
  

  but it not work in v6.
• How can I fixed my problem"FirebaseError: Firebase: Error (auth/invalid-api-key)."

  My environment variable is ok. No comas and name mistakes but they given me error like "FirebaseError: Firebase: Error (auth/invalid-api-key)". How can I fixed it. Please Help me...

  This my .env file

  REACT_APP_apiKey=AIzaSyBWobnhbdeMdNpXXXXXXXXXXXXXXXXXXXX
  REACT_APP_authDomain=XXXXX.firebaseapp.com
  REACT_APP_projectId=XXXX
  REACT_APP_storageBucket=XXXXX.appspot.com
  REACT_APP_messagingSenderId=4997390XXXXX
  REACT_APP_appId=1:4997390XXXXX:web:cc7bc80aa1bdb78fXXXXXX
  REACT_APP_measurementId=G-M1XDXXXXXX
  

  This my firebase config file

  const firebaseConfig = {
    apiKey: process.env.REACT_APP_apiKey,
    authDomain: process.env.REACT_APP_authDomain,
    projectId: process.env.REACT_APP_projectId,
    storageBucket: process.env.REACT_APP_storageBucket,
    messagingSenderId: process.env.REACT_APP_messagingSenderId,
    appId: process.env.REACT_APP_appId,
    measurementId: process.env.REACT_APP_measurementId,
  };
  
  when I debugging firebaseConfig object
  
  console.log(firebaseConfig.apiKey);  ==========> undefined 
  console.log(firebaseConfig.authDomain);  ==========> undefined 
  console.log(firebaseConfig.projectId);  ==========> undefined 
  console.log(firebaseConfig.storageBucket); ==========> undefined 
  console.log(firebaseConfig.measurementId); ==========> undefined 
  console.log(firebaseConfig.appId); ==========> undefined 
  console.log(firebaseConfig.measurementId); ==========> undefined 
  
  

  client side given error this "FirebaseError: Firebase: Error (auth/invalid-api-key)"
• Images with Firebase and Python Flask API

  I am currently developing an API using Firebase from google and Python's Flask libraries. It is a proyect where I am in need of saving images to the DB and then adress them in the API. I would also like to know how to relate the image to an item in the database, say posting an image of Juan, and that is linked with ALL the information from Juan inside the DB. Thanks!
• Need help finding an api or real world data related to read time of people

  I need to create a project for which I require real world data of reading time per page or article. Can anyone help me find data or api in which I can get this data I tried to search for some api but they had information related to books instead of their reading time of a person.
• Using Websocket Channel in React

  I am working on a project where I have to make an api call to a websocket, and display certain information based on that call. As you can see I have used the subscribe portion of the channel in my call. Now I'm not sure what to do if anything with the 2nd two set of bracket. Do I need to include them my call as well, or do they come along with the subscription? And from which of them would I be using the information I need to display? In other words which one is the information I am recieving?

  

  '''

  const ws = new WebSocket("wss://ws-feed.exchange.coinbase.com");
  
    const apiCall = {
        type: "subscribe",
        product_ids: [
            "ETH-USD",
            "BTC-USD"
        ],
        channels: ["level2"]
    };
  
    ws.onopen = (event) => {
      ws.send(JSON.stringify(apiCall));
    };
  
    ws.onmessage = function (event) {
      const json = JSON.parse(event.data);
      console.log(`[message] Data received from server: ${json}`);
      
      
      };
  

  '''
• How to maintain global states created dynamically

  I am trying to Display list of items with then name and button to download its respective file Same list are available in different other screens. When I click on download

  1. State info sharing: It should start download and the state/progress of the download should be visible to same item available in different other screens.unique identifier is item id

  2. There can be parallel downloads

  Problem statement:

  1. Unable to share the information for same item if we use state within the same item
  2. On use of redux its solving problem 1 however Parallel download information is getting overwritten as its writing to same reducer state

  Any idea or approach is appreciated. Thanks
• I'm trying to implement Infinite Scrolling in a React application using the IntersectionObserver API but i'm running into some issues

  I'm trying to implement infinite scrolling and it's supposed to work by getting data in pages from the API...and then using the IntersectionObserver API, checking for an intersection between the target Element and the viewport, and when there's one, request the next page and get the data and add it to the previous posts...While experimenting I was able to get it to sort of work but it sometimes keeps requesting for the same page and maybe goes into an infinite loop of requests. I was going to try to create a custom hook for it but because I was also using redux I did something like this:

  Here's the post component with the infinite scroll implementation:

  const Posts = ({ setCurrentId }) => {
  
  const classes = useStyles()
  const dispatch = useDispatch();
  
  const { posts } = useSelector((state) => state.posts);
  const { numberOfPages } = useSelector((state) => state.posts);
  const { currentPage } = useSelector((state) => state.posts);
  
  const [postsArr, setPostsArr] = useState([posts]);
  const [hasMore, setHasMore] = useState(false);
  const [pageNum, setPageNum] = useState(1);
  
  useEffect(() => {
      dispatch(getPosts((pageNum)))
      const newPostsArr = postsArr.concat(posts);
      setPostsArr(newPostsArr);
      setHasMore(numberOfPages > 0);
  }, [pageNum]);
  
  const { loading } = useSelector((state) => state.posts);
  
  const observer = useRef();
  const lastPostElementRef = useCallback((node) => {
      if (observer.current) observer.current.disconnect();
      observer.current = new IntersectionObserver((entries) => {
          if (entries[0].isIntersecting && hasMore) {
              setPageNum((prev) => prev + 1);
          }
          dispatch(getPosts(pageNum));
      });
      if (node) observer.current.observe(node);
      if (currentPage === numberOfPages) setHasMore(false);
  }, [hasMore]);
  
  if (!postsArr.length && !loading) return 'No posts found';
  else
      return (
          <Grid className={classes.container} container alignItems="stretch" spacing={3}>
              {postsArr[0].map((post, i) => (
                  (postsArr.length === i + 1) ? (
                      <Grid key={post._id} ref={lastPostElementRef} item xs={12} sm={6} md={6} lg={3} >
                          <Post post={post} setCurrentId={setCurrentId} />
                      </Grid>
                  ) : (
                      <Grid key={post._id} item xs={12} sm={6} md={6} lg={3}>
                          <Post post={post} setCurrentId={setCurrentId} />
                      </Grid>
                  )
              ))}
              <div>{loading && <CircularProgress />}</div>
              </Grid>
          )}
  export default Posts;
  

  Here's the action that gets dispatched:

  export const getPosts = (page) => async (dispatch) => {
  try {
      dispatch({ type: START_LOADING })
      const { data: { data, currentPage, numberOfPages } } = await api.fetchPosts(Number(page));
  
      dispatch({ type: FETCH_ALL, payload: { data, currentPage, numberOfPages } });
      dispatch({ type: END_LOADING })
  } catch (error) {
         console.log(error)
      }
  }
  

  And then the reducer:

  const postReducer = (state = [], action) => {
  switch (action.type) {
      case START_LOADING:
          return { ...state, loading: true };
      case END_LOADING:
          return { ...state, loading: false };
      case FETCH_ALL:
           return {
              ...state,
              posts: action.payload.data,
              currentPage: action.payload.currentPage,
              numberOfPages: action.payload.numberOfPages,
              // error: action.payload.error
          };
     default:
              return state;
      }
  }
  export default postReducer
  

  I don't think there's a need for this but here's the backend API controller function:

  const getPosts = async (req, res) => {
  const { page } = req.query;
  
  try {
      const LIMIT = 8;
      const startIndex = (Number(page) - 1) * LIMIT; //GET THE STARTING INDEX OF EVERY PAGE
      const total = await postMessage.countDocuments({});
  
      const posts = await postMessage.find().sort({ _id: -1 }).limit(LIMIT).skip(startIndex);
  
      res.status(200).json({ data: posts, currentPage: Number(page), numberOfPages: Math.ceil(total / LIMIT) });
  } catch (error) {
          res.status(404).json({ message: error.message });
      }
  }
  

  posts and postsArr returns undefined and the component returns this error:

  I hope this is detailed enough and I'd really appreciate a response on what I'm doing wrong or if there's a better way to accomplish my goal.
• Accessing previous state within a useDispatch method

  How do I access previous state inside the callback function in react? Because once I access data it is always returning an initial state version, since I use useEffect only on mount

  const data = useSelector(({ state }) => state.data);
  const dispatch = useDispatch();
  
  useEffect(_ => {
      dataService.loadData().then(resp => {
          dispatch({ type: 'SET_DATA', payload: resp.data });
      });
  }, []);
  
  const addData = newData => {
      dataService.addData(newData).then(_ => {
          // need the up to date state here for data
          dispatch({ type: 'SET_DATA', payload: [newData, ...data] })
      });
  }
  
  return <>
      <button onClick={_ => addData({ name: "new name" })}></button>
      {data.map(elem => <div>{elem.name}</div>)}
  </>