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
5
votes
0 answers

React: get raw jsx from children in ParentComponent

Is it possible to get the actual “raw” jsx text wrapped by a Parent component (e.g. from props.children)? Given this component: question: In Parent.js, can I do anything with this.props.children (or…
bilo-io
  • 597
  • 3
  • 17
5
votes
4 answers

What exactly is a "Prop" in React?

I just started using React native on iOS to see how it feels like and I have a silly question.. I see everyone talking about "Props", whenever I read an article or a tutorial, the author uses this term a lot and it's the same in the code. For…
Randy
  • 4,335
  • 3
  • 30
  • 64
4
votes
1 answer

How to conditional use props in a Material UI TextField component

I want to create a general component based on Material UI TextField in conjunction with Formik I have already handle the rest of the props, but I don't know how to do it with value and onChange, I can solve the problem by using 2 functions for…
Salo Avalos
  • 80
  • 1
  • 6
4
votes
2 answers

How to pass input value from one component to the other component( where api & data display code are )? how to make connection between 2 components?

I have two components where one comp provides a search input field where the user will enter data(e.g; city name) and another comp provides the main weather data( based on the user search input from comp 1) like temp, wind, etc.. how should I pass…
4
votes
2 answers

React - Adding props.something as a dependency of useEffect

I have this useEffect code here: useEffect(() => { if (status === "completed" && !error) props.onAddedComment(); }, [status,error,props.onAddedComment]); But I get this warning in the terminal: React Hook useEffect has a missing…
Tehila
  • 917
  • 4
  • 19
4
votes
2 answers

Pass dynamic value into react-i18next useTranslate

So I have a value I am receiving from an endpoint and I'd like to pass it into my translate command. So this is what I have currently: ${t('translation:user.form.placeholder')} And I'd like to be able to do something like this:…
Ire
  • 55
  • 1
  • 4
4
votes
2 answers

React component props not changing when they should?

A project I am working on involves a large component tree passing props down which come from a large complex state object in the top component. In one particular component "ChecklistEditor" I am mapping the "subchecklists" prop into "Subchecklist"…
dividebyzero
  • 111
  • 9
4
votes
2 answers

Is initial state based on props always bad in React?

It's a common React knowledge that having state initialized by props is bad if we don't make them in sync. This is considered fine: import { useState, useEffect } from 'react'; export default function MyInput({ initialValue }) { const [value,…
Robo Robok
  • 21,132
  • 17
  • 68
  • 126
4
votes
0 answers

Cannot pass array of objects into child component using React/Typescript

I would like to pass an array of objects from parent component to child component, but when I pass as props and declare interface on child component with expected types parent component gives error. How can I pass the data? Here is the code to pass…
4
votes
1 answer

Why do my two click events in my React app run at the same time?

I have two user settings options. One is "enable cascading panels", and the other is "include attachments". I have set up state variables and toggle functions to pass down to the child components so that when I click on either, the parent is able to…
Hussam Ahmed
  • 413
  • 1
  • 5
  • 17
4
votes
2 answers

Is it possible to use spread out operator to set the react component props?

I wanted to use spread operator to set the component props. This is mainly because I don't want to use state for each of the props value. Is this possible? The code below returns an error saying that the props are missing. Thanks in advance! const…
Wreeecks
  • 2,186
  • 1
  • 33
  • 53
4
votes
1 answer

How to update State Hook with onClick listener on React Component Instance

I'm attempting to add an onClick to a component instance which changes the state of a useState hook, and prints it out to the console. However, nothing fires when the component instance is clicked. I have tried wrapping it in a JSX div element and…
OJM
  • 442
  • 5
  • 16
4
votes
1 answer

How can I pass props from a functional parent component that uses the state hook?

So I am working on this UserData App (for practicing purposes). I have one component where I store hardcoded user data - an array with different user objects. In my app, I want a list of users (which displays usernames only) on the left side of the…
4
votes
3 answers

How can I make a check in input value (React)

I have and custom input that I use in my project. And I want to make check on input value before put it in props. I put in input value number which I get from mapping array. I want to make a check like if arrVal !== 0 put arrVal else put…
Volodymur
  • 65
  • 1
  • 6
4
votes
2 answers

How to target props in Class Component

I am biulding a MultiStep Form. At the Last page I am trying to push all the data to firebase. I am using props and states to pass the values from page to page. Unfortunantly I do not know, how to target the values and the last page. (I am using…
daniel ragimov
  • 175
  • 1
  • 1
  • 10