Questions tagged [react-component]

Use this tag for questions regarding React components, one of the basic React concepts.

React components are a basic React concept. React components build a user interface in the order they are declared.

References:

  1. React.Component API
1057 questions
128
votes
4 answers

What are React controlled components and uncontrolled components?

What are controlled components and uncontrolled components in ReactJS? How do they differ from each other?
Xin
  • 22,636
  • 12
  • 71
  • 68
73
votes
12 answers

How to add custom html attributes in JSX

There are different reasons behind it, but I wonder how to simply add custom attributes to an element in JSX?
Andrey Borisko
  • 3,933
  • 1
  • 19
  • 29
68
votes
11 answers

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode

I am trying to use a function as a prop inside a component and this component is a child of another component. But the function is not working.? Can I know why. This is the warning i am receiving in the console. Warning: findDOMNode is deprecated…
54
votes
6 answers

How to use useStyle to style Class Component in Material Ui

I want to use useStyle to style the Class Component . But this can be easily done hooks. but i want to use Component instead. But I cant figure out how to do this. import React,{Component} from 'react'; import Avatar from…
29
votes
8 answers

React - Dynamically Import Components

I have a page which renders different components based on user input. At the moment, I have hard coded the imports for each component as shown below: import React, { Component } from 'react' import Component1 from './Component1' import…
LEJ
  • 1,378
  • 3
  • 13
  • 21
17
votes
1 answer

What are context and updater arguments in the React library?

I was trying to understand the React through the React library, but couldn't understand what context and updater is, which is passed in to the Component. Following was the code in the library. function Component(props, context, updater) { …
Ishan Patel
  • 3,509
  • 6
  • 31
  • 54
14
votes
3 answers

How will React 0.14's Stateless Components offer performance improvements without shouldComponentUpdate?

This question has been going round and round in my head since I read the release notes (and other related hype) around React 0.14 - I'm a big fan of React and I think that stateless components…
11
votes
4 answers

Is it okay to connect a PureComponent?

I was wondering if this is okay: import React, { PureComponent } from "react"; import { Text, TouchableOpacity } from "react-native"; import { connect } from "react-redux"; import PropTypes from "prop-types"; class ListItem extends PureComponent { …
J. Hesters
  • 8,261
  • 15
  • 78
  • 164
11
votes
3 answers

React warning: Functions are not valid as a React child

I have this react component. This is not rendering properly but getting an annoying warning like Functions are not valid as a React child. This may happen if you return a Component instead of from the render. Or maybe you meant to call this…
Arindam Sahu
  • 157
  • 1
  • 1
  • 10
8
votes
2 answers

Webpack generating [hash].worker.js file when packaging custom library

I'm trying to create a library of reusable react components for our internal use. Webpack is bundling the output - which should be a single file. But it's actually putting out the bundle.js that I'd expect plus a file called…
Patrick Dench
  • 593
  • 1
  • 5
  • 23
8
votes
1 answer

TypeError: Object(...) is not a function React

I'm learning React from this channel. Recently, I stumbled upon React Hooks from here. So, I tried to convert a class based component to hook based. Here is my class based component: import React, { Component } from 'react'; class AddNinja…
Mahmudul Haque
  • 432
  • 2
  • 7
  • 16
7
votes
3 answers

Passing data to sibling components with react hooks?

I want to pass a variable 'username' from sibling1 component to sibling2 component and display it there. Sibling1 component: ´´´ const sibling1 = ({usernameData}) => { const [username, setUsername] = useState(""); // i want to pass the…
gospecomid12
  • 198
  • 1
  • 13
7
votes
1 answer

React-native component cache (or prevent unmounting) (react-navigation)

So my question is quite simple. I have a navigation by react-navigation. Scenario navigate from screen A to screen B. - each components in screen B are mounting / creating go back from B to A - each components from screen B are unmounting navigate…
7
votes
2 answers

Ref error in React.JS Ref - createRef, useRef, and using Refs

I am trying to use the ref property using React. I get a strange error in my browser, and I am not able to figure out what the problem is. Can anyone explain to me why I get this error: Error: Invariant Violation: addComponentAsRefTo(...): Only a…
John
  • 6,370
  • 4
  • 37
  • 58
6
votes
3 answers

ripple effect leaking at corners as if Pressable button has a borderRadius

I'm using Pressable for buttons after referring this docs pressable docs Now I want to add ripple effect to the button but it is not working properly.
1
2 3
70 71