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

Nextjs - passing props from custom _app.js to component?

How can I pass props from here to a Navbar component that I would add under the Head component? I already did it in the index.js page using getServerSideProps, but it doesn't seem to work in the _app.js file. import "../_app.css"; import React from…
Zakaria
  • 421
  • 5
  • 13
5
votes
3 answers

How to set the default value to props

The below code fetch the URL data and retrieve All the film list with the duration in seconds But I want to list out only the films which have duration more than 5000 secs *The component should have a prop minDuration and only films with a duration…
Bala
  • 73
  • 1
  • 1
  • 6
5
votes
2 answers

(React Native) onPress doesn't work for Text component

I'm trying to get the onPress to work, but "hi" is not being printed. In fact, the gray default background that should show behind the text when it is clicked does not show. If I replace the nested text with a TouchableHighlight component, it does…
Andy Lebowitz
  • 1,471
  • 2
  • 16
  • 23
5
votes
2 answers

How to pass a value to a StaticQuery using props string?

I'm developing a site in Gatsby.js with a blog within and for a post layout, I'm coding this header with a background image to be set by the post author. I'm still in the designing phase, placing elements, blank texts etc. I've made this component…
EdBucker
  • 63
  • 1
  • 3
5
votes
0 answers

Controlling Carousel with Links React-Bootstrap

I'm trying to control a Carousel from Links in a NavBar. What I have right now is a click method in the HomePage component (the parent component of both the NavBar and Carousel) that updates the state of the currently selected index based on which…
5
votes
1 answer

React: pass Component as prop and use it with additional props

I have a general component such as this const Img = ({ component }) => { const image_ref = useRef() return ( <> {component ref={image_ref} } ) } And I want to use it with other components like these const MyImg = () =>…
GWorking
  • 4,011
  • 10
  • 49
  • 90
5
votes
1 answer

getInitialProps does not work with async function

I have file in this path ./pages/blog/[id]/[title].js and here are the codes that I have written : import React from 'react'; import PropTypes from 'prop-types'; import fetch from 'isomorphic-unfetch'; import BASE_URL from…
i am davood
  • 175
  • 15
5
votes
4 answers

How to access a prop in a layout component if my component is being passed to the layout component as a chilren prop in ReactJS?

I have a Layout component that contains a state called isLightMode, which I would like to pass as a prop for other components to access and use. Here is my Layout component: import React from 'react' import Main from '../components/main' export…
kimbaudi
  • 13,655
  • 9
  • 62
  • 74
5
votes
2 answers

How to pass async state to child component props?

I'm new to react and I am trying to fetch data from an API and pass the data to a child component. I've passed the data to the state on my parent component, however, when I pass it to the child component as props it logs as an empty array. I'm sure…
Sai
  • 801
  • 3
  • 10
  • 27
5
votes
6 answers

How to send data from dialog back to parent container with react?

I have a react-big-calendar (The parent container), I have also a select which, the events of the calendar are fetched according to this select ( doctor name ) and I have a button when I click on it, the dialog will be appears (another component),…
Ichrak Mansour
  • 1,850
  • 11
  • 34
  • 61
5
votes
2 answers

How to access props outside of a class component React

I'm having trouble understanding how to access props defined outside of a class component in React. In the following code all props are defined except for this.props.checkboxArray which currently returns "cannot read property 'props' of…
ctb116
  • 65
  • 1
  • 5
5
votes
0 answers

How to add to component props the HTMLProps types using flow in React?

I've tried to use flow with React, but found some strange behavior, if I try to include HTMLProps from React to the component Props type, flow throws an error "Cannot get React.HTMLProps because property HTMLProps is missing in module…
Umer
  • 161
  • 1
  • 6
5
votes
3 answers

ReactJS: Save input value on blur and not on every key stroke

I have created a React View, say MyView, which has 2 text inputs whose initial values will be passed by parent read from a DB. I also want the changed values to be saved back to DB. So, the view is also passed a callback function for the…
5
votes
2 answers

how to hide and show loading spinner - Activity Indicator react native, managing props and state

I have created a custom Activity Indicator class and I want to control the hide/show of it from where I use it. Here is what I have done. CustomActivityIndicator.js import React, { Component } from 'react'; import { ActivityIndicator, View,…
5
votes
4 answers

React | pass data from parent to child component

In React, I'm having Files like --parent.js --child.js --App.js parent.js contains Textbox and button child.js contains P tag App.js contains Both Parent and Child Component Problem Pass the Textbox value from Parent on button click to child and…
Selvin
  • 795
  • 6
  • 12
  • 22