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
1482 questions
263
votes
9 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
  • 33,823
  • 14
  • 84
  • 85
96
votes
11 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
  • 4,511
  • 2
  • 22
  • 31
68
votes
7 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…
41
votes
9 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,868
  • 4
  • 16
  • 24
25
votes
2 answers

React Hook Form: Submit a form with nested components or extract fields of nested components to submit

I have a form with multiple components in it (with each being either a functional or a class based component) containing multiple input fields or radio buttons. When I submit the form I either want to submit the fields that are nested into…
Ahmed
  • 2,966
  • 7
  • 42
  • 69
22
votes
6 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.
Vikas Acharya
  • 3,550
  • 4
  • 19
  • 52
21
votes
2 answers

Next.js Fetch and Maintain global data for all components

In my Next.js app, I need to make an API call that will return a JSON response which needs to be used by all the components. Hence I will avoid multiple calls for the same API in my components. What is the proper way to achieve this?
Jayanth
  • 485
  • 3
  • 9
  • 17
19
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
  • 5,571
  • 12
  • 47
  • 68
18
votes
2 answers

Pass style as props in react component

I created a event-box component in react. What I want is whenever is it called, I passed color values as props which later get used to set its border. Currently, I set two hardcoded class names and passed them as props with the component. Is there…
Pranay kumar
  • 1,983
  • 4
  • 22
  • 51
16
votes
3 answers

NextJS: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

Using Nextjs and I've created an index.js in the /pages directory and created meta.js in the /components/meta/ directory. As my app rebuilds I get the following error: Element type is invalid: expected a string (for built-in components) or a…
Leon Gaban
  • 36,509
  • 115
  • 332
  • 529
15
votes
4 answers

How to use Iframe in react native?

I try to find any way to add Iframe to my react native app. I found react-iframe, but it didn't work for me. I followed document. I just import react-iframe and copy Iframe tag to use. My result is like image below. I need other way to use Iframe…
Mengseng Oeng
  • 753
  • 2
  • 7
  • 19
15
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
  • 227
  • 1
  • 3
  • 10
14
votes
4 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…
13
votes
3 answers

does parent component re-renders when changes occur in child components?

I have a parent component which looks like this: const Parent = () => { return ( ); } if any changes occur in one of the child components, will the Parent component re-renders ?
13
votes
2 answers

Passing setState to child component using React hooks

I'm curious if passing setState as a prop to a child (dumb component) is violating any "best practices" or will affect optimization. Here is an example where I have the parent container passing state and setState to two child components, where the…
1
2 3
98 99