Category "reactjs"

Why Is My Image out of sync with my Text?

I'm attempting to select a random slide from slides on page load, and display it in a hero section of a website. But, the Image keeps getting out of sync with t

Reading multiple objects, in a single object, with in an array, with unique keys. into FlatList

I am trying to display this data in a FlatList. Array [ Object { "-N1gqvHXUi2LLGdtIumv": Object { "Message": "Aeaaeaea", "Message_CreatedAt":

How to test if a component is rendered with the right props when using react-testing-library?

I have some components that are rendering another component (FetchNextPageButton) that is already tested in isolation, like these ones: const News = () => (

How to change PublicPath for Create React App in Dev Environment

I am using Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0-rc1-final which internally uses Create-react-app and AspnetCore.ReactDevelopmentServer My Dev. Envi

How do I get all documents in a Cloud Firestore collection using Version 9 of the Modular Web SDK?

I am trying to get all documents in a collection using version 9 of the Web SDK. But I am getting this error: "TypeError: querySnapshot.map is not a function"

ESLint configuration with typescript jsx

I am having issues with configuration with typescript. Here is my following code in tsconfig.json: { "compilerOptions": { "target": "es5", "lib": [

How to get data from prop.location.state in react?

I try to send data through history push like that. And then I try to get the value of id that I send. The problem is when the first time rendering of compon

Consider using the "jsdom" test environment

I have this simple test: import React from 'react' import { render } from '@testing-library/react' import Button from '.' describe('Button', () => { it('

MUI DatePicker hangs on big date changes

MUI DatePicker (either from Labs or X) was working fine. I cannot work out what happened, but it now hangs if I want to change the date by ten years. It seems l

Adding next and prev buttons using react.js

I succeded to paginate my posts but couldn't add next and prev buttons and make them dynamically using this code snippet: import React from 'react' const Pagi

How to define default mock data for relay?

I am doing unit tests on a react app that is using relay as a graphql client when testing , i get mocked data with like this : title: '<mock-value-f

Unable to load Maven meta-data from https://jcenter.bintray.com/org/webkit/android-jsc/maven-metadata.xml Issue in react native

FAILURE: Build failed with an exception. What went wrong: Could not determine the dependencies of task ':app:lintVitalRelease'. Could not resolve all artifacts

What is `react/no-unused-state` and why is it bad?

Can someone explain exactly what no-unused-state means and why is it considered bad practice? I can't seem to find any information other than the following sen

custom button component + tailwind styles being purged

I want to create a button component like this: function Button ({ color }) { return ( <button className={`hover:bg-${color}-300 bg-${color}

What is the difference between the different ways of importing material-ui components?

From reading the material-ui documentation and online examples, there seem to be different ways of importing the same item: import TextField from 'material-ui/

Issue in react MUI table in horizontal scroll when i show button in right side of table on hover

My EditDeleteButton button cell that I am showing button based on hover in a row that working fine I make EditDeleteButton to position: "absolute" and table to

.firstElementChild, .lastElementChild... what about those in between?

I'm trying to update an existing markup element in React rather than replacing an entire fragment. When I assign a div container element to a variable with .get

Rollup & Typescript type declarations with absolute imports

I'm making React component library. Project structure is something like: src/ components/ utils/ hooks/ Now I'm trying to generate types (.d.ts.) file

How to specify custom mouse cursor with JSX style

How can I specify a custom mouse cursor using a JSX inline style? This works fine: <Component style={{ cursor: 'crosshair' }} /> but I cannot seem to

Type 'Element[]' is missing the following properties from type 'Element': type, props, key

I have the standard arrow map ES7 function with Typescript and React environment: const getItemList: Function = (groups: any[]): JSX.Element => group.ma