I’m new to JS and React and i’m currently working on a project using React. The project in question is a social media app where you create posts. I wanted to use fetch to get a list of “posts” and then use react to format them. I was able to get it to work from a post online, however I
Tag: reactjs
How to detect a query param appended to URL using pure React
I have an injected external widget in my React application that have some links and when clicking in these links a query param is appended to the URL. Imagine something like this: base url: http://localhost:8080/ url after adding the query param: http://localhost:8080/?shouldOpenModal Is there any way to detect this appended query param to the URL using React? It’s important in
React.js JS Sending Array as a property to an element turns the array into an object
I’m attempting to understand why sending an array as a prop to another element transforms it into an object with a value of the array but I would like some help understanding the why and whether it is a universal JavaScript ‘quirk’ or if it is to do with React and props. The next paragraph is context and can be
Prompt Repeats Twice When Page Renders (Undesirable) React.js JavaScript
When I have a basic prompt setup such as or The prompt repeats itself twice when the page loads. I only want this to happen once. I tried initializing the prompt with a loop without useEffect and I get the same results. When I try to initialize the prompt with a loop inside useEffect the prompt only shows up once
Insert item between every other item in array similar to Array.join
Array.join is useful because it glues together an array of strings by a delimiter taking into account empty arrays and not padding the delimiter at either end of the output string. I am making a React application and I would like find a similar native function, however, my array of React.ReactNode elements is going to be mapped and rendered, so
Unsure as to why conditional rendering is not working in react
I’m trying to have something conditionally rendered based on the length of the array I receive from the backend which contain objects. If the length is 0, then I want it to say something like “no projects” and if the length is > 0 then I want it to just display the projects on the screen. Here is what I
GET request with axios (using await) returning undefined
I’m using axios to get data and then handle 401 error and so far it works, but there is a problem when I try to import my axios function and use it I got undefiend but not the actual response. Btw I have seen simillar questions and didn’t find answear. axios function code the fetching part what I get on
Fields in Formik (validated on Yup) are constantly displaying an error as if they are empty or invalid. find codesandbox-link attached below
//The onChange variable in the fields is updated on the above code. I am unable to find the solution towards making the below fields function properly. I tried using formik’s setFieldValue however It didn’t work The below code is the return function: Sandbox Answer Simply use Formik’s handleChange event and values. You don’t need to create custom functions or states
How can I setState of specific Switch created dynamically by a map?
I have Switches created dynamically by a map like this: https://i.imgur.com/KuwY5Bb.png By this code: And it’s works but when I click one Switcher all switchers change together. This is happening because all Switches are created with the same “reference” enabled. How I set an individual var to each Switcher without Hardcoding individuals [enabled, setEnabled] to each one (I have more
How to style a React component with SCSS using props?
I created an UI library with several components. These components must not be changed in the frontend, and all their variations must be defined in the library, so they only need to pass props to the component. For the library I’m using React + Storybook + TypeScript + Rol lup. I don’t want to use styled-components because the project must