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
22
votes
4 answers

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 characters such as: '♥', '>', '+', etc. export…
user10823960
22
votes
6 answers

(react-window) How to pass props to {Row} in {Row}

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 -- expected a string (for built-in components) or a…
Bens
  • 831
  • 4
  • 12
  • 28
22
votes
1 answer

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 sorted the clients based on click. I have moved the…
acd37
  • 532
  • 1
  • 7
  • 14
21
votes
6 answers

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] = useState(0); I want to initialize that 0 value by the…
Kiran Maniya
  • 8,453
  • 9
  • 58
  • 81
21
votes
2 answers

When to use React.PropsWithChildren

In what to me seems like two similar setups, on one machine I was allowed to call Where MyApp had the class signature export interface IMyAppProps { accountId:…
Thorkil Værge
  • 2,727
  • 5
  • 32
  • 48
18
votes
2 answers

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={ foo: 'bar' } } .... In this…
J Seabolt
  • 2,576
  • 5
  • 25
  • 57
17
votes
4 answers

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 = () => (React.Children.map(children, someMapingFunction); I've been using JSX.Element but…
linuxdan
  • 4,476
  • 4
  • 30
  • 41
16
votes
4 answers

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 in a way that aren't detected by…
barrylachapelle
  • 967
  • 4
  • 13
  • 34
16
votes
4 answers

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 (

viswa ram
  • 461
  • 2
  • 4
  • 9
15
votes
7 answers

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{ continue = e => { e.preventDefault(); this.props.nextStep(); }; render() { const { values1, handleChange } = this.props …
lydal
  • 802
  • 3
  • 15
  • 33
15
votes
1 answer

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 } from "@material-ui/core/Button"; import withStyles,…
J. Hesters
  • 13,117
  • 31
  • 133
  • 249
14
votes
1 answer

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 at the this.state method. (TS) Property 'state'…
Dylan
  • 323
  • 2
  • 5
  • 17
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
6 answers

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 console.log the correct data but am unsure of how…
Tamjid
  • 4,326
  • 4
  • 23
  • 46