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.

Filter by
Sorted by
Tagged with
0 votes
1 answer
15 views

Getting multiple and duplicate values after maping an array prop and then passing the maped value as prop to another component in React

I am using React with material ui and I am getting this strange bug. I have a parent Orders page, and then passing an array of orders to the orders component like this: <PendingComponent ...
Enoch's user avatar
  • 21
1 vote
1 answer
46 views

State hook change not re-rendering parent component when state updated from child

I have a Parent and a child component. The child component is a pop-up rendered based on parent state value props. the child component is a pop-up that renders perfectly on the initial message from ...
Rizwan Mohammed's user avatar
0 votes
0 answers
7 views

How can I make the onClose property work in case of escapeKeyDown and backdropClick in MUI <Modal> component?

I have a standart handleClose func const handleClose = () => { setOpen(false) router.back() } Which I pass to onClose <Modal open={visible} onClose={handleClose} /> I ...
Вячеслав Чвертко's user avatar
2 votes
1 answer
22 views

React Router: Unable to Navigate to a Route Using useNavigate Hook

I am currently working on a React application that uses React Router for navigation. I have a component called ShowNotes where I want to implement a "Delete" button that navigates to the &...
med hedi ben salah's user avatar
-1 votes
0 answers
41 views

wierd behavior in a React.js component

I will show you two similar react components that I expected to work the same way but they didn't Those are part of a form. Dynamic form elements that users can increase or decrease based on thier ...
KarimMaged's user avatar
-2 votes
2 answers
42 views

Can't pass any props when using Typescript with ReactJS

I'm trying to pass props from my AllProducts, MenProducts etc. components to AddToCartButton component so that I can reuse AddToCartButton component. If I try to pass props like <AddToCartButton id=...
Bruno Bakarić's user avatar
1 vote
1 answer
56 views

Get selected value in flowbite-react Datepicker component - Props change event not working

I am having an issue getting the selected value from the Datepicker component from the flowbite-react library. Using with NextJS. The component displaying nicely. I have tried the following code, ...
minhub's user avatar
  • 11
0 votes
0 answers
28 views

Uncaught TypeError: Cannot read properties of undefined (reading 'image') in my page

I'm encountering an issue in my web application where I'm getting the following error in the browser console: Console Uncaught TypeError: Cannot read properties of undefined (reading 'image') at ...
Benzo's user avatar
  • 79
0 votes
1 answer
31 views

How to pass props to class that extends Component<Props>?

I have a class I want to pass props to: type TestProps = { location: any setMill: (value: any) => void } class TestClass extends Component<TestProps> { componentDidMount() { ...
Quribe's user avatar
  • 43
1 vote
1 answer
75 views
+100

Issue with React PropTypes combined with defaultProps and inside an object

In the following React 17.0.2 example: // Container.tsx const InfoPropType = { legend: PropTypes.string.isRequired, value: PropTypes.number, }; const ContainerPropTypes = { config: PropTypes....
gaitat's user avatar
  • 12.4k
-1 votes
0 answers
20 views

Passing props between not "relatives" components using redux

i'm approaching mapStateToProps and mapDispatchToProps, i made a component called Prova.js that contains the props i want to be shared between my components, here it's: import React, { Component } ...
Pepitos333's user avatar
0 votes
0 answers
81 views

React does not recognize the prop on a DOM element, how to fix it?

I am learning React and I'm stuck on this warning : "react-dom.development.js:86 Warning: React does not recognize the isSelected prop on a DOM element. If you intentionally want it to appear in ...
Guillaume D.'s user avatar
0 votes
0 answers
19 views

Eslint removing JSX component props indentation when rendering with ternary

I want indentation of component props when rendering with a ternary like this: return ( <div> <h2> blogs </h2> {user === null ? <LoginForm ...
dblinkhorn's user avatar
0 votes
1 answer
24 views

Pass counter value from child component to parent component

There is a child component. There are buttons with weights on it. The load can be selected, or the choice can be removed. The weight of each load is added to the previous one. Chlld-component: <ul ...
W300I's user avatar
  • 11
0 votes
1 answer
40 views

Why do I get a "not a function" error for my function?

I have been building this Accordion component for a few days, and I have run into an issue whose solution has eluded me. import { useState } from "react"; import PropTypes from "prop-...
RB50's user avatar
  • 43
-1 votes
0 answers
14 views

how to pass deep nested child component data to higher lvl parent component

I want Hero get the minutes, seconds after CountdownTimer start countdown, but now it is not connected. how can I fix it? import React, { useState, useEffect } from "react"; import Timer ...
Ooop Overhere's user avatar
0 votes
0 answers
28 views

Props error problem saying it is not a function

Kakao is also using the API. Now I keep getting an error saying that onSelectLocation is not a function, but I really don't know. Pass the onSelectLocation function from the parent component to the ...
27Lia's user avatar
  • 1
-1 votes
1 answer
43 views

Unable to run function shared a prop to dropdown

I am passing my api call function as a prop from my form.js file into the dropdown component in order to dynamically retrieve the data from the database and populate my dropdown option as shown in the ...
Ayudh Sarkar's user avatar
-1 votes
3 answers
53 views

What typeof searchParams Props for Typescript?

I'm newbie at typescript and my codes: type searchParamsProps = { manufacturer: string, model: string, year: number, fuel: string, limit: number, } export default async function Home({ ...
InSho's user avatar
  • 1
0 votes
1 answer
18 views

How do I pass a variable to another component and display it in another file

I am trying to create a cart page. I have a product file that fetches products from fakestoreapi, maps through them and displays it. There is also a button that onClick passes product(a single product ...
MortalChris's user avatar
0 votes
0 answers
28 views

Fluent UI - Combo box - Problem with selectedOptions

I am working with Fluent UI on my React js + SPFx project and found a problem. In my ComboBox component I am trying to set property for selectedOptions and onChange I want to write it to console. ...
jck4real's user avatar
0 votes
1 answer
23 views

React event handler not removing object from array of objects (useState)

I am trying to make a playlist app where you can use the search results to create your own playlist. Ive successfully been able to pass the songs from my search results to the playlist but when I try ...
shimmyshimmyya7347's user avatar
0 votes
2 answers
38 views

ReactJS - Props is Not Passed to Component

I created a project where a component shows a list of Employees. MyEmployee component: import { useState } from "react"; export default function MyEmployee({ data = [], page = 1, size ...
Blablabla's user avatar
  • 127
0 votes
1 answer
43 views

Why can't I access the key values in my array of objects in React

I am trying to create an app where you can go through a list of recipes and click a recipe to add it to your list of favorites. Currently my app is creating a new card but the card has none of the ...
shimmyshimmyya7347's user avatar
0 votes
0 answers
29 views

Issues with Cart feature in React JS

I've managed to get my Cart feature to show up at the bottom of my Foodinfo page, but when I click on the Cart itself it's just a blank page. How can I pass the props to the cart while not having the ...
Metalmilitian85's user avatar
0 votes
1 answer
253 views

How to pass props to child component in Next.JS 13

I'm having some trouble getting NextJS to work with props and passing them through components. This may be a bit more of a React approach so maybe it doesn't work here but I've tried googling and not ...
Duuutch's user avatar
  • 21
0 votes
1 answer
32 views

how do i get the quantity from a cart in react

i want to display products dynamically from an object called menu: menu = [ { id: 1 title: soup, likes: 67, types: [ { subid:1, subtitle: tomato, price: 1 }, { ...
Daniel Sanchez Islas's user avatar
0 votes
3 answers
70 views

useEffect runs before props value is received from parent components

Below useEffect gets executed before props value is received from the parent component. I have noticed that this error happens only once after loading a new app and on reloading same app after getting ...
James's user avatar
  • 328
0 votes
0 answers
33 views

Passing a prop to a different element appears to be done properly yet the prop is never recognized by the receiving element

I am building a React app that handles file encryption and decryption. I am stuck in the part of naming a file. So far I had the app name every exported decrypted file as "Decrypted_File", ...
Greg's user avatar
  • 357
0 votes
1 answer
44 views

Setting state in React from props doesn't work

Recently, I was playing with React and got stuck in - what seems to me, a fairly strange problem. import React, { useState } from "react"; import Person from "./Person"; import ...
Mr. Cob's user avatar
0 votes
0 answers
13 views

React Props Cards component duplicate table

i have a problem. I'm with a project just for test, using React Props/Cards component, and my table is duplicate your rows TH for each row JSON coming database. Thats my project. how do I solve this ...
Caci Love's user avatar
2 votes
1 answer
489 views

styled component error "it looks like an unknown prop "responsive" is sent through to the DOM, which will likely trigger a React console error."

I am using react data table component which requires me to install styled component. The moment i render the DataTable after passing the columns and data prop, I get various errors on my console ...
Nosarumen Imuentinyan's user avatar
0 votes
1 answer
39 views

How to make React Rating Mui component required

The TextField mui component has a required attribute that you can set that makes it required before you submit the form (a pop up appears that asks you to fill it before you submit). I want the Rating ...
Yonlif's user avatar
  • 1,770
0 votes
1 answer
19 views

How to pass function and prop function to onClick?

I'm try to add on click prop function and function on click to run on the same click. prop is function that show sorted list and useState to show which btn active. The problem is when i push a btn it ...
Tyubit's user avatar
  • 5
0 votes
2 answers
35 views

Cant send backgroundImage in props

I have a problem to pass the backgroundImage this is my code: Home.js import React from 'react'; import './Home.css'; import AlarmCardInvertida from '../components/AlarmCardInvertida'; function Home(...
KatiaSisHost's user avatar
1 vote
1 answer
41 views

How to add an onClick event on a React Component that is passed down to another component as a prop

I'm trying to create a trigger component that I can pass down to another component. And I want to be able to add a click event on that trigger component from the receiving component. here is a ...
iustinian's user avatar
  • 103
0 votes
0 answers
34 views

Get different values in function and outside a function REACT.JS

I just started my career as a software developer. I have a problem with getting the right values. I have a component, where I get from the parent component as a prop an image tag. In the Child ...
Tech Kam's user avatar
0 votes
1 answer
38 views

Passing a function down two components as a prop and it returns as undefined in the destination component

import React, { useContext, useState } from 'react'; import Main from '../components/Main'; import Row from '../components/Row'; import requests from '../requests'; import AppContext from '../lib/...
Joshua Baker's user avatar
0 votes
0 answers
17 views

Accessing props in async function, odd results

These console log statements are printed when I move from "/search/?q=A" to "/search/?q=B" ("executeSearch") is triggered when this happens) The first two show what I ...
Bayley Sapara's user avatar
0 votes
0 answers
9 views

It's Showing cannot read properties of undefined reading name

const page = (props) => { const slug = props.params.id // console.log(slug) const [showModal, setShowModal] = useState(false) // const [pDetail, setPDetail] = useState(null) let ...
DEEPAK KUMAR's user avatar
0 votes
1 answer
36 views

Toast message appears twice when importing 2 components in one page

I have this peculiar problem and it's my first time encountering it. I created a button that handles application creation using Redux toolkit. According to the UI design the button should appear twice ...
user avatar
0 votes
2 answers
32 views

Best way to update single passed as props to multiple component hierarchy at the same time in React

I have 3 component say ParentComponent , MiddleComponent and ChildComponent. ParentComponent has a boolean var say isPresent. It is being passed as props to MiddleComponent which passes the var ...
Keshav's user avatar
  • 1,123
0 votes
0 answers
9 views

How to add an event to a div container that will copy the content of that container and send it to another div container

I am working on a booking website in react, and I want to add a click event to the service div, so that whenever I click on any service I want to book, it will automatically copy the content in the ...
Tobiloba Clinton's user avatar
0 votes
1 answer
30 views

Using a prop in the path of a styled component

I've got a couple of styled-components with paragraphs that use the same exact css-stylings, these stylings come from an imported data object. I'm trying to figure out what would be the best way to be ...
ElzarMehwuando's user avatar
2 votes
0 answers
40 views

React useState hook doesn't take the right value after re-render

So, I'm building a stopwatch app on a dashboard and I'm implementing a feature where you can move the stopwatch(time) from one component to another. I pass a function as a prop to the stopwatch ...
Reklyss's user avatar
  • 21
2 votes
0 answers
243 views

How can I pass props from parent component (client) to child component (server) using {children} syntax?

I am trying to pass props from a parent component (client component) to a child component (server component). I am using {children} syntax for rendering my child component. In React, sending props to ...
nedzad's user avatar
  • 118
0 votes
1 answer
13 views

React.children.only expected to receive a single React element child - error when adding a boolean to props

I am trying to use a boolean to differentiate behaviour between SearchSections which are outer sections and inner sections using the boolean outerSection. The code works perfectly until I add the &...
Bayley Sapara's user avatar
-1 votes
1 answer
34 views

how do I do to not cause a red underline of props from reactjs?

const Residence = (`*props*`) => { return ( <div className="img-container"> <img src={`*props.image*`} width="300px" /> <span>{`*props.price*`...
Lanly's user avatar
  • 1
0 votes
0 answers
77 views

Set Custom Components as children prop in React + Typescript

I am trying to create a custom RadioGroup that takes custom component: Radio as children prop This is my code so far /* RadioGroup Component */ export interface RadioGroupProps { value?: boolean; ...
Oluwaferanmi Ajiboye's user avatar
1 vote
0 answers
22 views

React date format issue in ExpenseDate.js

1. Below is ExpenseDate.js------------------------------------------------------------ const ExpenseDate = (props) => { const year = props.date.getFullYear(); const month = props....
Swati 's user avatar
  • 29

1
2 3 4 5
66