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
12
votes
3 answers

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. Whenever i refresh the list, I am passing a boolean…
Jude Fernandes
  • 7,437
  • 11
  • 53
  • 90
12
votes
1 answer

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 this, so that the backgroundColor property of the…
Amirth
  • 143
  • 1
  • 1
  • 7
11
votes
2 answers

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 can use useSelector and get the sate. But as I…
ziondork
  • 169
  • 8
11
votes
3 answers

Type 'void' is not assignable to type '((event: ChangeEvent) => 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:
lydal
  • 802
  • 3
  • 15
  • 33
11
votes
2 answers

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,height} = props // do stuff here …
Phantom
  • 423
  • 1
  • 5
  • 13
11
votes
5 answers

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 map, but I am unsure how to deal with calculations…
LoF10
  • 1,907
  • 1
  • 23
  • 64
11
votes
7 answers

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 : Now the in the Link tag I pass in an id to the component.Now the Card component fetches additional detail based…
Ayan Banerjee
  • 151
  • 1
  • 3
  • 11
10
votes
6 answers

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.
Anuj Srivastava
  • 103
  • 1
  • 1
  • 7
10
votes
2 answers

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 component and pass it down, the child component still…
Dark Programmer
  • 482
  • 3
  • 6
  • 18
10
votes
1 answer

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 (props.display) { return

This text is…

CodingMadeEasy
  • 2,257
  • 4
  • 19
  • 31
9
votes
2 answers

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" }, { "title": "Title 2", "content": "Content 2" }, { "title": "Title 3", "content":…
Steph
  • 443
  • 2
  • 4
  • 15
9
votes
3 answers

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 App.js import React, { createContext } from…
9
votes
2 answers

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 to display when the user navigates to it. App.js…
0xD1x0n
  • 686
  • 4
  • 12
  • 31
9
votes
3 answers

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 state to the child components via props than upon…
scribe
  • 673
  • 2
  • 6
  • 17
9
votes
1 answer

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 on another radio button in another row of my…
RamAlx
  • 6,976
  • 23
  • 58
  • 106