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

Unable to pass a function as a prop to child component in React

I'm trying to pass a function (addTask) as a prop from parent component (MainComponent.js) to Child Component (Button.js) but it's not working. I've also passed a variable (btnColor) as prop and it's working properly. What am I…
Swaraj
  • 27
  • 4
0
votes
0 answers

I write if else statement to pass props to other components but it doesn't work

I want it to be displayed next to the components that the parent calls through to be will display the text as 1111 will display the text as 2222
Thanh Nhan Do
  • 9
  • 2
0
votes
1 answer

Trying to pass props to an axios call

I am building a forum and I want to make it where: Once you click on the title, it displays a page (which I already created) that displays the post title and then the post body. I used MUI to build the page as well. However, the Axios call fails…
airemike
  • 1
0
votes
1 answer

React Native - How to pass Image source from outside

To send entire require('./images/logo.png') as a prop i have to create boolean to check if the image is from web or is being passed from a local folder. How to create this kind of boolean? type ImageProps = { imageName: string; fromWeb:…
CodingProfile
  • 159
  • 8
0
votes
1 answer

How to receive an image through props in react vite

This code that you can see works if the project was created with create-react-app but instead it throws the following error "require is not defined" {textoImagen}/ If anyone knows a way to receive…
Aldebaran
  • 11
  • 1
0
votes
1 answer

Display a specific component by its key

I have this WP API data that I'm fetching in to a component called "HostingCard". I am mapping through this component which renders three cards. While mapping through these I am assigning a key to each of them. `{hostings.map((hosting) => ( …
Mattyb
  • 3
  • 3
0
votes
0 answers

Is it possible to pass props from non ReactApp template (when using CDN import of React) to a ReactJS component?

I am importing ReactJS via CDN links into a huge existing PHP project (latte templates). So it is not a classic ReactApp. And I would like to play with it and see the options of React when used this way. So far pretty good. But I would like to know…
martina
  • 1
  • 2
0
votes
1 answer

Load props before using to set state in a useEffect hook

I am trying to pass a user address into this Fetch Function, set the value of a state variable equal to the address, and then use that address to make an api call. But as expected, everything runs at the same time and the api call fails because it…
Matt
  • 13
  • 3
0
votes
0 answers

how this.props available in react class render()?

how this.props available in react class render() ?, but I have not passed any props in constructor and super ex : class App extends react.Component { constructor(){ super() //here we have not passed the props to the parent class } …
ashwin sg
  • 11
  • 1
0
votes
1 answer

disable button while onClick is running react

There is a save button in my react application that takes several seconds to complete it's onClick handler. In the time when the onClick handler is running, the user can press the button again and the onClick handler will run again after the last…
Gage Shaw
  • 1
0
votes
1 answer

Page not rendering in ReactJS

// jshint esversion:6 import { Divider } from '@mui/material'; import React from 'react'; import Carousel from 'react-multi-carousel'; import "react-multi-carousel/lib/styles.css"; import { products } from './productdata'; const responsive = { …
V.G
  • 103
  • 4
0
votes
0 answers

How to change background color of a container using a separate button?

There is a button at the bottom that when I click I want it to change the background color of the pink containers. How do I make it work, linking the button to the container? import ListCar from './ListCar'; import {useState} from 'react'; export…
Mariammmm
  • 31
  • 3
0
votes
2 answers

React Native status bar semi transparent

Is it possible to make StatusBar semi-transparent with an opacity of 0.8? if I pass backgroundColor={"transparent"} like in the docs it becomes fully transparent without color. Docs https://reactnative.dev/docs/statusbar
CodingProfile
  • 159
  • 8
0
votes
1 answer

Pass data as object down to React child component

I created a helper routeData to map the data and pass the data to the child component : const routeData = { routeOne: { title: 'Title one', description: 'Description one', image: '/Header.jpg', style: config.style, …
meez
  • 3,783
  • 5
  • 37
  • 91
0
votes
2 answers

React Native switch between props onPress

How can i switch between appearance props with onPress? exampe: Default -> Active -> Background -> Default. in AppearanceButton file i have these three props appearance?: "default" | "active" | "background" These props control the color of my…
CodingProfile
  • 159
  • 8
1 2 3
…
99
100