Category "reactjs"

Conditionally render a React component depending on a descendant's render

We use Reakit dialogs to prompt users to take an action in our React web app. On some pages, we have specific text related to the action and would like to rende

Trying to loop through firebase and display each object as a card React

My data is structured like so [1]: https://i.stack.imgur.com/dWsr3.png I am trying to loop through the database and put the data from each card into props for m

Next.js Navbar gives a warning of Target Element not found when clicked

I am currently working on a next.js app, which contains a connect wallet button found to the right of the navbar, with the navigation links to the left of the n

How do I style a component that has `styled-components` nested in it?

I am new to styled-components. I'm trying to set styles for MyComponent to apply to styled-component. export const Relative = styled.div` position: relative;

Is there a way to override what useMemo does to determine if there's a change?

useMemo(() => expensiveFunction(), [deps]) re-executes the expensiveFunction when the deps have changed. I was wondering... is there a way to control how Re

React & CSS: How to override :root in css module in React?

Short question. I'm trying to build a theme selector for an app and was wondering how to change the :root of a css module in a press of a button in jsx.

How to pre-download items from a JSON list array in React JS?

Here the Codesandbox example. I have a list array of songs: const tracks = [ { name: "Sunny", src: "https://www.bensound.com/bensound-music/

What are my options to deal with this stale closure in React besides using ref

I'm using the library React Datasheet Grid, the main component has a property called OnActiveCellChange, to which i'm passing my custom function: const [selecte

How to custom search bars in Ant Design ProTable

Currently, I am using table of antd ProTable. I want to divide a column into two smaller ones, and each should has its equivalent search bar. However, it only s

How is the video stream still making it to the peerConnection although I disabled it?

I'm working on a peer to peer webrtc project using react, hooks, and redux. When I make modifications such as disabling the video, I don't see it on the local v

How to add random minutes like first slots should be 30 minutes and then 1 of 15 minute slot and again 30 minute slot

const eventClick = (args) => { let StartTime = moment(args?.event?.StartTime, 'HH:mm ') let EndTime = moment(args?.event?.EndTime, 'HH:mm ') if (

How to make Categories button functional

I got my current website displaying hard coded data from my data.js file. I implemented firebase as my database and I want to have my categories button work wit

Insert tab character into SlateJS text editor

How to insert tab characters into SlateJS? So inserting   is a tab character, however, when inserting this as text, it appears as the literal character

React / Rails / I18next change language in URL or refresh server-side props

I'm using React with Rails. I get some props from a React controller when rendering the page initially. When changing the language on the frontend (I18next), we

How to pass const value from one react js file to another?

I am a little new on react. How can I pass a variable with its value from one react js file to another? File A.js: const [value, setValue] = useState(35) Fil

ReactJS - Convert to Array Mapping

How can I convert this link to a array mapping, I already tried making a array object with name, path, icons, and label properties. But when I do that the cart

State lost value in bootstrap table

I am using custom fields in react bootstrap table. { dataField: "hours", text: "# of Hours", sort: true, footer: "# of Hours", headerStyle: (colum, c

TypeError: Class extends value undefined is not a constructor or null while using stream-browserify

While using stream-browserify to import Transform class and extend it in the code causing the following exception in the browser console AudioUtils.ts:52 Uncaug

Trying to refactor React App to React-Redux issue w/ volume slider

I've been doing freecodecamps Drum Machine app. I was able to complete the app completely with React but I made a copy to try and get familiar with using react-

React - .map returning not a function?

I was following this example: https://reactjs.org/docs/faq-ajax.html But my code is returning weather.map is not a function? function App(props) { const [wea