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
6
votes
1 answer

Passing Tailwind class as a prop in React

I am creating a reusable component button to which I want to pass two Tailwind classes as props and use them dynamically. Here is my component: function Button({ primary, secondry, label, onClick }) { return (
Ahmad Malik
  • 117
  • 1
  • 1
  • 9
6
votes
3 answers

Typescript in Reactjs How to make dynamic Props type?

I want to create a generic Table component. type HeadCell = { id: keyof DataType; label: string; }; type TableProps = { heads: HeadCell[]; rows: Array; }; const Table = ({ heads, rows }: TableProps)…
Hasina Njaratin
  • 401
  • 1
  • 6
  • 17
6
votes
3 answers

How to pass an object as a prop in React using typescript?

I am trying to learn typescript and to be quite honest I am having a hell of a time wrapping my head around this. I understand that this question has been asked COUNTLESS times before but I cannot for the life of me figure out how to translate the…
MrBabalafe
  • 120
  • 1
  • 1
  • 7
6
votes
1 answer

How to access props.children with testing-library/no-node-access

I have successfully installed eslint-plugin-testing-library and used overrides so it only warns me on code in test files. However, it complains Avoid direct Node access. Prefer using the methods from Testing Library. for the following code…
Matt
  • 4,261
  • 4
  • 39
  • 60
6
votes
1 answer

Prop change not triggering useEffect

I have a react component with a useEffect that is not being fired when the props change. I would like this component to update what it is displaying based on the prop. However, when the prop changes nothing happens. For debugging I added a button…
Lenny Meerwood
  • 61
  • 2
  • 10
6
votes
2 answers

TypeError: Cannot read property 'data' of undefined - can't access Object "props" beyond certain level in Reactjs

I'm making an API call in via axios in React with a UseEffect. We set the response to a variable called data using useState const [data, setData] = useState({}); setData(response); The response is from NASA API and we only get one object (pasted…
gcr
  • 443
  • 2
  • 5
  • 14
6
votes
3 answers

How to communicate from a grandchild up to its grandparent then back down to the grandparent's child in React Native

I'm new to React so I hope I'm approaching this problem correctly. First I have a screen called SearchLocationsScreen. Inside that screen I have a component called Map and inside of Map I have custom marker components called LocationMarker. At the…
Jo Momma
  • 1,126
  • 15
  • 31
6
votes
1 answer

Is it possible to write a script to inject props on a React component?

So this is a little crazy. There's a web app that I use that is built with React, which has made certain design decisions that I disagree with. Luckily, the design is actually simple to change exactly the way I want. I can just open the Chrome…
suddjian
  • 1,986
  • 2
  • 16
  • 25
6
votes
3 answers

Reusing multiple instances of react component with different props

So I have a child component that I want to render multiple instances of in a parent container component. Passing in different props to each so they display differently. What is happening is that they are both being rendered with the last instance…
graveltrunk
  • 75
  • 2
  • 6
6
votes
4 answers

How to get the address from google maps autocomplete in React Native

I am using react-native-google-places-autocomplete to select a location. I want to extract the location selected and use it in other component. How can I save the address This is my code import React, {Component} from 'react'; import { View,…
Rafael V. Vega
  • 79
  • 1
  • 2
  • 5
6
votes
2 answers

onclick props not working with Material UI?

here is my situation on React.js I have a function on my App.js call selectNumberOfPeople, then In my child component ( call General) I had a button as:
6
votes
3 answers

Setting state in render by using this.state

I've recently seen this type of react pattern where the state is being set in a render by using this.state: class ShowMe extends React.Component { constructor(props) { super(props); this.state = { showButton:…
user2456977
  • 3,830
  • 14
  • 48
  • 87
6
votes
2 answers

Pass the local image path as a prop between two functional components

I'm working on a project in react-native, where I have troubles of understanding how props works between functional components. My requirement is to create a re-usable button component where I can just pass the image location in the resource file…
danu
  • 1,079
  • 5
  • 16
  • 48
5
votes
1 answer

Tailwind not working when using variables (React.js)

currently have been facing this issue using tailwind and making rehusable react components where you can pass as a prop some styles as tailwind classes. The actual problem is with the "pb-{number}" propierty. I can pass it this way and will work…
Francisco Alamino
  • 69
  • 1
  • 6
5
votes
1 answer

How can I pass props after fetching from database?

I am using Firebase as backend and the schema is as following const sample_data = { Name: "", Address: "", Contact_no: "", Email: "", img_url: "" } First of all I am fetching with asyncfunction like this FetchList.js let dummy =…
Uttam
  • 718
  • 6
  • 19
1 2 3
…
99 100