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.
3,291
questions
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
...
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 ...
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 ...
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 &...
-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 ...
-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=...
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, ...
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 ...
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() {
...
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....
-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 } ...
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 ...
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
...
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 ...
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-...
-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 ...
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 ...
-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 ...
-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({ ...
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 ...
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.
...
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 ...
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 ...
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 ...
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 ...
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 ...
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 },
{ ...
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 ...
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", ...
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 ...
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 ...
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 ...
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 ...
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 ...
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(...
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 ...
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 ...
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/...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 &...
-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*`...
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;
...
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....