Stack Overflow
Stack Overflow

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.

Reactjs is a JS library developed by facebook. React relies on making of components which handle variables through props.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

-React Documentation

3283 questions
326
votes
10 answers

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: The resulting HTML output is:
cantera
  • 24,479
  • 25
  • 95
  • 138
204
votes
1 answer

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" ] } and my react component (cut down), is another component class QuestionSet…
Michael
  • 8,229
  • 20
  • 61
  • 113
149
votes
6 answers

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'}; I want this to function as passing individual…
Sabrina
  • 1,621
  • 2
  • 11
  • 16
123
votes
5 answers

PropTypes in functional stateless component

Without using class, how do I use PropTypes in functional stateless component of react? export const Header = (props) => (
hi
)
Alan Jenshen
  • 3,159
  • 9
  • 22
  • 35
91
votes
8 answers

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 { collapsed: boolean; listOfData: T[]; displayData: (data: T, index: number) =>…
hronro
  • 1,157
  • 1
  • 8
  • 11
65
votes
7 answers

Passing useState as props in typescript

Say I have a parent component with two child components: const Parent = () => { const [myVar, setmyVar] = useState(false) return ( <>
Arnab Datta
  • 5,356
  • 10
  • 41
  • 67
62
votes
5 answers

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 possible, and I'm pretty sure its something to do…
pyan
  • 865
  • 2
  • 12
  • 23
57
votes
9 answers

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 object:
catandmouse
  • 11,309
  • 23
  • 92
  • 150
47
votes
2 answers

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: PropTypes.any, // <-- how can I validate that this…
mpen
  • 272,448
  • 266
  • 850
  • 1,236
45
votes
11 answers

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 when passing props from one screen to…
weedskurt
  • 451
  • 1
  • 4
  • 4
45
votes
4 answers

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, however, when I pass native props. See error…
Sergej Herbert
  • 753
  • 1
  • 7
  • 15
32
votes
1 answer

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(props) { useEffect( () => { …
Mumfordwiz
  • 1,483
  • 4
  • 19
  • 31
27
votes
3 answers

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: you can define default values, either in…
leonbloy
  • 73,180
  • 20
  • 142
  • 190
27
votes
3 answers

`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 been renamed, and is not recommended for use. See…
B--rian
  • 5,578
  • 10
  • 38
  • 89
23
votes
3 answers

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 = () => { setModalProps(modalProps =>…
Soumitra Bhattacharyya
  • 271
  • 1
  • 2
  • 7
1
2 3
…
99 100