score:1
if you want to pass an object to props here are the steps:
- define the object in your parents state.
- pass the object in props when calling components
- get the object from props in child.
here you are missing the second step!
you should try these:
mainpage
render(props){
const { data, modalobject, displaymodal } = this.state; //use destructuring is more readable
return (
<div>
<header />
<navigationbar />
<purchaseinfoview show={displaymodal} closemodal={this.closemodal} modalobject={modalobject}/> //pass the object from destructuring state as props
<div classname="purchase-side">
<div classname="side-title">
<h1>purchase order list</h1>
</div>
<hr class="solid" />
{
object.keys(data).map((key) =>
<div classname="list-item">
<h2 onclick= {() => this.openmodal(data[key].id)}> //get id
{ data[key].item_name}
</h2>
</div>
)}
</div>
<div classname="dads">
</div>
</div>
);
}
openmodal
openmodal = (id) => {
this.setstate(
{
displaymodal: true,
modalobject: {id: id, ...any others key/val pair}
});
};
purchaseinfoview
class purchaseinfoview extends component {
render() {
const { modalobject} = this.props; //here get your object from props
console.log(modalobject.id);// here you have the object
return (
<div classname="modal"
style={{
transform: this.props.show ,
opacity: this.props.show ? "1" : "0"
}}
>
<h3>purchase order detail</h3>
<p>id: {modalobject.id}</p>
</div>
);
}
}
tell me if you have any question in comment ;)
nb: i did this with an object (aka {} ) if you needed more things in your modal than just id. if just id is needed you just have to replace the modalobject by just the "id" you need
cheers!
edit: for this solution to work you have to either:
initialise your state to this at least:
this.state={ modalobject : { id: ''}}
or make a not null test in your child component before displaying the element like so:
id: {modalobject && modalobject.id ? modalobject.id : ' '}
these are needed because on first render your state will have the initial state you setted so if you didnt set anythin or didnt test for a value... well... it's undefined! :)
(note if id is null instead of having an undefined error you will have a blank space displaying in your modal)
score:0
guess you are calling it wrongly. it should be {this.props.id}
render() {
console.log(this.props.id);
return (
<div classname="modal">
<h3>purchase order detail</h3>
<p>id: {this.props.id}</p> //changed line
</div>
);
}
inside main page pass the id to purchaseinfoview and access it as a prop
<purchaseinfoview show={this.state.displaymodal} closemodal={this.closemodal} value={this.openmodal} id={this.state.id}/>
Source: stackoverflow.com
Related Query
- Pass an object value in props to another component
- pass state value as props to another component es6
- How can I match data from an object and pass it as props to another component that displays dynamically?
- How to pass value through props to another component and error : `Use the defaultValue or value props on instead of setting selected on <option>`?
- Pass a value from an object to another object in props
- How to pass props without value to component
- React-Router: pass props from one component to another using link
- React: How to pass State value to another component and use it to render a component
- How to pass props of one child component to another child component using parent component
- Pass props to another component onclick of a button
- How to fetch data asynchronously inside component and pass it as props to another component in render?
- How to pass a value for useState hook from another component in ReactJS?
- React-Router: pass props from one component to another using Navlink
- pass object from state as props to child component
- Pass Component from JS Object as props in React
- Pass props to another component and redraw the page
- How to pass an object as props to a child Functional Component in React.js?
- How to pass props to a component which is being passed as value
- How to pass props onClicked function in one component to another
- How to type an object that contains a React component as a property and also that component's props as another property?
- TypeError: Cannot read property 'props' of undefined. Need to pass props form a functional component to another one
- How to pass return value from component to another one
- Pass value from one component to another values in array ReactJS
- How to pass data received from database as props to another component in Reactjs
- I want to pass counter value to my component using props
- ReactJS: Passing a user object as a props to a component results in its value being undefined
- React how to pass a component with its props to another component
- Is it possible to compute type to react component props based on the presence or value of another prop using flow?
- How to pass props from one component to an another component in WeChat Mini-Program
- Way to pass value during Button on click to another component with async in react
More Query from same tag
- JSX syntax arrow function inside render
- Dispatch specific values to reducer from array on button click
- How to fire a setState function in react from child componenet to parent componenet with data from a button click
- Trying to load a dynamic path for image using React useEffect and useState from node.js server
- Javascript Match and Find from array
- Click handler inside loop (two returns) not working (React JS)
- Override Box component in createTheme
- How to detect if screen size has changed to mobile in React?
- unable to display state variable inside <h1>
- Why I couldn't inject default index.js file to the root html?
- How to write test code for custom hook using recoil
- Add Class to the element where Clicked event happens in React JS
- upgrade to webpack 4 UglifyJsPlugin error
- React AnimatePresence : Another component is suddenly showing before exit animation
- How to loop over values not part of same array in JSX
- 'react-router-dom 404 for subRoute
- Page not rendering; When passing props to children using protected routes in react-router-dom
- First onchange checkbox execution doesn't run correctly function React Native Help pls
- Is there a working example of React Transition Group's SwitchTransition component?
- How to get firestore instance with react-redux-firebase?
- MouseLeave event not firing for anchor elements
- How to override css properties of Material UI components
- Cannot get response from axios
- Fetch data from NewsApi (react, axios)
- React-router + typescript type error
- Dynamically created array by html objects - asynchronous
- Redux-form: How to set initialvalues on a wizard form?
- How to remove the mouse up event handler after logout in react?
- KeyCloak React refreshToken expired token
- Can Redux cause the React warning "Cannot update a component while rendering a different component"