Questions tagged [react-component]

Here is an example of a JSX file: const Routes = { item: '/Dev/Item', count: '/Dev/Count', }; module.exports = Routes; If you want to have the object set conditionally, you can do it like this: const Routes = {}; if(true){ this.Routes = { ...

I am attempting to associate a reference with each StyledSlide styled component below in order to determine which slide is the tallest by measuring their offsetHeight. In my approach, I am utilizing React.createRef. While this works fine during the initia ...

What is the correct way to utilize a custom theme with a component lib that utilizes Material UI without wrapping every single component? import { createMuiTheme } from '@material-ui/core/styles'; const theme = createMuiTheme({ palette: { ...

Currently, I am utilizing the PDFExport feature of kendo-react-pdf to create a PDF document based on a class component called SummaryComponent. Inside the render function, I have enclosed the content with PDFExport tags, and upon clicking a link labeled &a ...

When I call a function that returns HTML code, everything works fine until I try to pass a parameter in. At that point, I receive an error saying "Functions are not valid as a React child." The issue is that I need to access the props from this function. T ...

Currently, I am working on creating a basic axios call to communicate with a nodejs server from a react application in order to retrieve products stored in a mongoose schema model. The issue I am facing is that when the page initially loads, I can successf ...

I have encountered a situation where I am using two different class components and need to invoke a method from the parent component. To do this, I have created two references using React.createRef(). The issue I am facing is that one component accepts t ...

When working with React, state serves as a tool for storing data such as API responses and managing flags. But can we utilize the state for storing information that changes due to events or user actions but isn't displayed on the UI nor needs renderin ...

Currently, I am experimenting with creating multiple 3D models of cubes with varying textures on the faces using react-three-fiber. My goal is to export these models as gltf files. I have been referencing this useful resource on Stack Overflow for guidanc ...

Could you share a solution for fetching data in Next.js when data is added, deleted, or edited? I tried using useEffect with state to trigger the function but it only works when data is added. It doesn't work for edit or delete operations. I have mult ...

I iterate over a list of locations I need to retrieve the key of the component through onClick event Here is my console.log method: const addTo = (element) => {console.log(element);}; return ( <> {data.map((item) =&g ...

I encountered the following error: react-dom.development.js:14748 Uncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, render}). If you meant to render a collection of children, use an array instead. in Unknown (c ...

Having an issue with changing the style of a mapped TouchableOpacity. What I'm trying to achieve is that when one TouchableOpacity is clicked, its background color changes to black while also resetting the background color of any previously clicked Touchab ...

For my Next.js application, I am looking to efficiently retrieve JSON data from an API that will be shared among all components. What is the best approach to ensure that multiple calls are not made for the same API within each component? ...

When using props.history.push without passing state, everything works perfectly fine. However, when trying to pass data with state, an error occurs. The error message reads: DOMException: Failed to execute 'pushState' on 'History': function transformRequ ...

After performing a date calculation, I stored the values of year, month, and day in an object. Now, my goal is to send this object to the parent component App.js, and then pass that data to another child component named Modal.js as a prop. I want to displa ...

My goal is to present the array of data received from different API calls, such as /fruits and /pizza. I aim to format this data into a table that separates each element in the json array. How can this be achieved in React, assuming the API code functions ...

Is there a way to trigger a re-render of a functional child component when the parent state changes? When dealing with a class component as a child, I can use componentWillReceiveProps to solve this issue. However, my child component is a functional one. ...

Is there a way to prevent unnecessary re-renders in React when only part of the state changes? The issue I'm facing is that whenever I hover over a marker, a popup opens or closes, causing all markers to re-render even though 'myState' remains unchanged a ...

Looking at the AppBar code from Material-UI: https://material-ui.com/components/app-bar/#app-bar-with-a-primary-search-field I came across a section called "renderMobileMenu" which I want to integrate into my React Component class. However, the sample cod ...

I am working on using the react-frame-component to create an iframe. I am trying to bind a click event on the iframe and retrieve the DOM element with the id of "abc" inside the iframe. Can anyone guide me on how to achieve this? The code snippet provided ...

Just starting out with React Native. I have a common use case where I'm working with React Navigation and have 4 different Tabs. In the first Tab, I have a FlatList from which I want to select Favorites. These Favorites should then be displayed in an ...

Hey there! I am currently exploring the use of TinyMCE with React and State. Below you can find the React component that I have been working on. Upon loading, this component displays the initial text passed into it through props. However, despite making ...

Following the tutorial of Mosh Hamedani, I attempted to create a react-app. You can watch the tutorial here. I followed his instructions exactly as mentioned. I encountered an issue when trying to pass an argument named product to a function called on on ...

Just getting started with React and trying to pass data from a child component to a parent component. <div className="filter-module"> <i className="fas fa-sign-in-alt icon"></i> < ...

I am following [this React tutorial][1] and facing an issue right from the start as my React components are not being identified. Here is a snippet of my code: import React from 'react'; import {BrowserRouter as Router, Route, Routes} from "react ...

If you're using MSAL 2.0 in React, achieving a redirect to the login page can be done through various methods: Logging in with a pop-up Logging in with a redirect However, these methods are typically triggered by a login or sign-in button click. In my s ...

I am currently working on dynamically generating a form based on an array of objects. The objective is to allow users to create accounts dynamically by clicking the Add User button and then submit the complete state object of users to the backend. Encoun ...