Category "reactjs"

How to post data to supabase through next.js

I currently have a simple next.js website where users can look at projects for an organization, and at the bottom of the page, the user can input a new project

What is the difference between Nav.Link vs Link vs NavLink in react router DOM and react bootstrap?

I am confused about these three Links, what are the different ways to use them? Nav.Link Link NavLink i Do they have different use cases?

Load JSON data with useMemo

In the following line: it loads the json data using useMemo import MOCK_DATA from './MOCK_DATA.json' const data = useMemo(() => MOCK_DATA, []) As it's menti

Why am Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: number

I was running this program to display SVG image import React, { Component } from 'react'; import { View } from 'react-native'; import Expo from './assets/check-

React Confirm Alert library showing "Warning: ReactDOM.render is no longer supported in React 18."

I'm trying to use the react-confirm-alert library for a confirmation dialog. But it's giving me a warning when the confirmation pop-up is opening for the react

Firebase TypeError: Cannot read properties of null (reading 'indexOf')

When I console.log(docSnap) I'm getting a firebase error, see in the below image. I have tried all the solutions but none of them worked. useEffect(() =>

React Multiple Input value in single array

Hi I am making a react component which roughly looks like this below import React, { useState } from "react"; export default function App() { const [data, se

Deep find object in tree, then return object and the path to it through the tree

I've written a recursive function to find a given object and the path within that tree, but when I change the target id (over here : if(tree.targetModuleId ===

Cannot make a new line using <br /> html

I have a problem breaking down 1 line using <br />, I have converted to string but it doesn't work. I have followed this https://stackoverflow.com/questio

React heroicons icons are always black

I'm using @heroicons/react: ^1.0.5 and I'm trying to style the icons by applying another color. I'm using tailwindcss to manage my CSS. When I declare the follo

how to add props in route component in react-router-dom v6

As heading states, I used to have a page with a stateful component that gets different props based on changes to url made from . Now, upgraded to react router v

React-router-dom Link change the URL but it doesn't render the component in Rect JS

I am using React js components and want to render something by access some URL so problem is when i click on the Link it change the URL but does not render the

Yup when condition inside nested object

so i have a problem with conditional validation using yup. Basically i want shipping to have required properties when the checkbox is not toggled. I am using yu

How can I change the background color based on a value?

I'm learning React and this question came up. Can I change the background color depending on the variable value that came as a prop? thanks import React from 'r

ReactJS/Springboot- Blocked by CORS policy: No 'Access-Control-Allow-Origin'

I am working on a project with Springboot ReactJS and MongoDB. I have implemented the whole code but it doesn't import data from the database. It shows the belo

Typescript interface for a nested array of objects

I'm new to Typescript and I have to build an interface for the following props type: const myProps = [ { name: 'name1', on: true, children: [

Why use useState over this.state?

I have been learning React hooks lately and I am currently facing useState. I know this is a way to use state in functional components but I wonder what the rea

React causing: Can't perform a React state update on an unmounted component

My situation: After login I try to get username and save it to redux store after this redirect from login to home page(in this page I display list of tasks) and

How do I get smooth scroll and scroll snap to work together in React while also persisting user scroll position on refresh?

I have a custom hook that persists the user's scroll position on page refresh. I also want to implement smooth scrolling for my navigation links (site is a sing

Deploying Reactjs website on github pages with routing results in 404 error on refresh

I've created a ReactJS webpage with multiple routes using BrowserRouter and deployed in via GitHub pages with its own domain. The website works perfectly as int