Questions tagged [react-props]
ReactJS is a JS library developed by facebook. Props are the variables to be used in react components. Use tag when having doubts regarding usage of react props.
3,292
questions
326
votes
10
answers
130k
views
Access props inside quotes in React JSX
In JSX, how do you reference a value from props from inside a quoted attribute value?
For example:
<img className="image" src="images/{this.props.image}" />
The resulting HTML output is:
<...
- 24.6k
205
votes
1
answer
423k
views
forEach() in React JSX does not output any HTML
I have a object that I want to output via React:
question = {
text: "Is this a good question?",
answers: [
"Yes",
"No",
"I don't know&...
- 8,269
149
votes
6
answers
192k
views
Passing object as props to jsx
I have an object contains multiple common key-value props, that I want to pass on to some jsx. Something like this:
const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
<MyJsx commonProps /&...
- 1,621
123
votes
5
answers
70k
views
PropTypes in functional stateless component
Without using class, how do I use PropTypes in functional stateless component of react?
export const Header = (props) => (
<div>hi</div>
)
- 3,159
91
votes
8
answers
85k
views
How to use generics in props in React in a functional component?
In a class based component, I can easily write some code like this:
import * as React from 'react';
import { render } from 'react-dom';
interface IProps<T> {
collapsed: boolean;
...
- 1,157
65
votes
7
answers
75k
views
Passing useState as props in typescript
Say I have a parent component with two child components:
const Parent = () => {
const [myVar, setmyVar] = useState(false)
return (
<>
<MyChildComponent1 myVar={myVar} ...
- 5,376
62
votes
5
answers
181k
views
React - TypeError: Cannot read property 'props' of undefined
I'm trying to create a click event be able to delete an item on my list, but when I click it I get "TypeError: Cannot read property 'props' of undefined".
I'm trying to stick to ES6 as much as ...
- 855
57
votes
9
answers
25k
views
React props: Should I pass the object or its properties? Does it make much difference?
When passing props should I pass the entire object into the child components or should I individually create props first in the parent component and then pass those props to the child?
Pass entire ...
- 11.3k
47
votes
4
answers
48k
views
Specify specific props and accept general HTML props in Typescript React App
I have a React Wrapper Component, that accepts some props, but forwards all others to the child component (especially relevent for native props like className, id, etc.).
Typescript complains, ...
- 773
47
votes
2
answers
47k
views
React propTypes component class?
How can I validate that the supplied prop is a component class (not instance)?
e.g.
export default class TimelineWithPicker extends React.PureComponent {
static propTypes = {
component: ...
- 273k
45
votes
11
answers
58k
views
How to pass props to Screen component with a tab navigator?
This is my first post on StackOverflow, so apologies if I'm not following the correct format.
I'm building my first app using tab navigator from React Navigation v 5.x and have run into a big problem ...
- 451
32
votes
1
answer
54k
views
react hooks props in useEffect
I have started using react-hooks and there is something I am trying to understand.
I have this useEffect hook, I'm separating my useEffect hooks, I want to know when each hook runs.
function MyComp(...
- 1,483
27
votes
3
answers
56k
views
How are boolean props used in React?
I'm trying to clarify some confusion I have about boolean props in React.
Suppose a have MyComponent with several boolean props prop1, prop2...
First: it seems that boolean props are like just others: ...
- 73.4k
27
votes
3
answers
37k
views
`componentWillMount` warnings visible even though 'componentWillMount' is not explicitly used
In my code, I do not have any explicit uses of componentWillMount, but still I am seeing a couple of warnings when running webpack.
react-dom.development.js:12386 Warning: componentWillMount has ...
- 5,618
24
votes
3
answers
74k
views
Type 'Element | undefined' is not assignable to type 'ReactElement<any, string | ((props: any)
I have a component that looks like this. This version works perfectly:
export default function StatusMessage(isAdded: boolean, errorMessage: string) {
if (isAdded) {
return <ResultAlert ...
user13101751
23
votes
3
answers
80k
views
How to pass function as props from functional parent component to child
Parent Component:
const initialValue_modalProps = [
{ show: false, response: "" }
];
const [modalProps, setModalProps] = useState(initialValue_modalProps)
const passedFunction = () => {
...
22
votes
4
answers
83k
views
Form pattern validation with react-hook-form
I have been working on a react form and I need to restrict users to put special characters and allow only these ones: [A-Za-z].
I have tried the below code but I am still able to insert inside special ...
user10823960
22
votes
6
answers
13k
views
(react-window) How to pass props to {Row} in <FixedSizeList>{Row}</FixedSizeList>
I am using library called react-window
When I pass props to its row like this:
{Row({...props, {otherProps}})}
it gave me an error something like:
React.createElement: type is invalid -- ...
- 831
22
votes
1
answer
52k
views
Passing a function with React Context API to child component nested deep in the tree
I'm using React Context API for the first time. I have a table that generates a list of clients. Originally, I stored the clients in an array in state, and in the same page I had a function that ...
- 532
21
votes
6
answers
30k
views
How to initialize the react function component state from props
I'm using React hooks for app state, I wondered about how to initialize the function component state using props? The useState hook doc says something definitive like,
const [count, setCount] = ...
- 8,511
21
votes
2
answers
35k
views
When to use React.PropsWithChildren
In what to me seems like two similar setups, on one machine I was allowed to call
<MyApp
accountId={this.props.accountId}
children={toggleButton} />
Where MyApp had the class ...
- 2,835
18
votes
4
answers
21k
views
What is the correct typescript type for react children?
I'm trying to properly type the props for a component that maps children:
type Props = {
children: any
}
const MyComponent: FunctionComponent<Props> = () => (React.Children.map(children,...
- 4,546
18
votes
2
answers
16k
views
this.state vs state in React
I'm working in a new codebase. Normally, I would set up state like this in a React component:
class App extends React.Component {
constructor() {
super();
this.state={
...
- 2,606
16
votes
7
answers
49k
views
Parameter 'e' implicitly has an 'any' type React TypeScript
I'm trying to implement this in a React TypeScript File:
export class MainInfo extends Component<IProps>{
continue = e => {
e.preventDefault();
this.props.nextStep();
};
...
- 852
16
votes
4
answers
40k
views
Comparing PrevProps in componentDidUpdate
I am trying to detect when a prop has changed inside componentDidUpdate of a mounted component. I have a test (refreshData in the code below) that is working fine. Is it possible to SOMEHOW pass props ...
- 967
16
votes
4
answers
52k
views
Can we pass setState as props from one component to other and change parent state from child component in React?
class App extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
this.setState=this.setState.bind(this)
}
render() {
return (
<div>
...
- 461
15
votes
3
answers
61k
views
Type 'void' is not assignable to type '((event: ChangeEvent<HTMLInputElement>) => void) React TypeScript
Im a beginner in React Typescript, and I have defined some props is a .JS file that I want to use in a .tsx file. but I receive this error on one of my TypeScript lines:
<MyTextField style={{...
- 852
15
votes
1
answer
18k
views
TypeScript: Interface cannot simultaneously extends two types
I'm writing a React app using TypeScript. I use material-ui for my components. I'm writing a custom wrapper for material-ui's Button component. It looks like this:
import MUIButton, { ButtonProps } ...
- 13.2k
14
votes
1
answer
17k
views
Property 'state' does not exist on type 'FetchPeriod'
I'm trying to learn ReactJS following this tutorial:
Tutorial
I'm new to the programming language so i'm clueless as to what to do now.
When I try to add the "Fetchemployee.tsx" file, I get an error ...
- 323
14
votes
4
answers
1k
views
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 (https:/...
- 2,244
13
votes
6
answers
58k
views
How to get React Table Row Data Onclick
Hi I am trying to set up my react app such that when you click on a button in a row item in my react-table the data in that row is passed onto another component. At the moment I am simply trying to ...
- 4,406
12
votes
3
answers
10k
views
Child component constructor called multiple times
I have a parent component which is a flat list which contains a header HeaderComponent. This HeaderComponent is a custom component that I have created which contains 2 child components of its own. ...
- 7,437
12
votes
1
answer
16k
views
How to pass style props for a specific component in react-native
I tried creating a button with specific styles for its .
I had more than 3 properties like justifyContent, alignItems, backgroundColor and height. I wanted to pass a style from another component to ...
- 145
11
votes
7
answers
23k
views
Re-render same component on url change in react
I have a route which takes an id and renders the same component for every id, for example :
<Route path='/:code' component={Card}/>
Now the in the Link tag I pass in an id to the ...
- 151
11
votes
2
answers
10k
views
Different ways of destructuring props in react
I have seen two ways to destructure props in React.
function MyComponent({name,age,height}){
// do stuff here
}
or
function MyComponent(props){
const {name,age,...
- 423
11
votes
2
answers
2k
views
Is it better to pass prop to child even if I can get it from redux inside child?
In my react application, lets say I have some data which is needed by both a parent component and its immediate child. The application uses redux for state management.
Now, in the child component, I ...
- 169
11
votes
5
answers
3k
views
How to properly time data rendering in react?
I am attempting to pull data from Open Data to put together a quick heat map. In the process, I want to add some stats. Almost everything runs well in that I have the data and am able to render the ...
- 1,917
10
votes
6
answers
17k
views
best way to Pass Multiple Props In React js
passing react Props as mentioned in the image, I want to know is that any cleaner way to pass the multiple props in React.
- 103
10
votes
1
answer
30k
views
Functional Components inside class components
Currently I have a class component that contains functions that act as components in my JSX.
Example:
class MyComponent extends React.Component {
MySubComponent = (props) => {
if (...
- 2,267
10
votes
2
answers
23k
views
Component not updating when I change the props that I pass to it in React
I have a functional component which has a child component. The child component displays some text which is passed onto it from the parent component via props. When I change the text in the parent ...
- 492
9
votes
3
answers
19k
views
How to update (re-render) the child components in React when the parent's state change?
Okay, I already know one way to do this. However, I am asking this in case I am reinventing the wheel since I am very new to React. I was under the impression that if a parent component passes her ...
- 673
9
votes
2
answers
11k
views
How do I pass a Prop to a Navigation Screen Component - React Native
I'm fairly new to React native . I have created a Drawer Navigator in my App.js file.
One of my navigation Components is a component named LoginScreen.
I am trying to to pass a prop to LoginScreen ...
- 686
9
votes
2
answers
27k
views
Loading content from a static JSON Next JS
I have Next JS project with static JSON placed in /pages/api/data.json that looks like this:
{
"Card": [
{ "title": "Title 1", "content": "Content 1&...
- 443
9
votes
1
answer
10k
views
Table Component is not re-rendered after state update
i'm having a table component for displaying some data. After dispatching an action the table data in the state are channging. However my table component is not updated. It is updated only when i click ...
- 7,006
9
votes
2
answers
6k
views
Can you use props on React.Fragment?
I know that a React Fragment can be used to group child components like this:
render() {
return (
<React.Fragment>
<Foo />
<Bar />
<Baz />
</...
- 17.3k
9
votes
2
answers
2k
views
How to call multiple setProps in enzyme?
I have the following test:
import React from 'react';
import { configure, shallow } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
import ...
- 2,738
9
votes
3
answers
11k
views
ReferenceError: Cannot access 'UserContext' before initialization - React
I am trying to create a UserContext to be accessible to all class components in the React app. I am receiving the following error.
ReferenceError: Cannot access 'UserContext' before initialization
...
- 177
8
votes
8
answers
259
views
ReactJS Props Undefined
I am learning how to use props. After taking research in either my mother language or english, I couldn't end up with a proper answer for my issue.
Please tell me why this threw errors. This is the ...
- 95
8
votes
1
answer
3k
views
Pass down a function with same name in React
I can passdown props with spread operator. ie,
<Component x={props.x} y={props.y} />
is equal to:
<Component {...props} />
And we can use it in the component definition with the same ...
- 17k
8
votes
4
answers
13k
views
passing function from server to client component Next 13
According to the Next.js docs for the app directory:
"Whenever possible, we recommend fetching data inside Server Components. Server Components always fetch data on the server."
This is ...
user20512643