I have the following setup where I have a function tomorrowDate() that returns a date. I want to pass this as a prop. But on the Child component this is undefined. I assume that there is something going wrong with passing the returned value.
How should I do that?
const Parent = () => {
const tomorrowDate = () => {
return new Date()
}
return (
<Child
minDate={tomorrowDate()}
test={"test"}
/>
)
}
class Child extends Component {
componentWillMount() {
console.log("props are", this.props)
}
render(){
// DO STH
}
}
The output is...
props are {test:"test", minDate=undefined}
I just copy and pasted your code and if you see the result of this snippet, it's working without any problem.
const Parent = () => {
const tomorrowDate = () => {
return new Date()
}
return (
<Child
minDate = {tomorrowDate()}
test = {"test"}
/>
)
}
class Child extends React.Component {
componentWillMount() {
console.log("props are", this.props)
}
render() {
return null; // DO STH
}
}
ReactDOM.render( <Parent / > , document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>I'm not sure what the issue is but I've created a snippet that does what you want.
function Child({ minDate }) {
return <div>{minDate.toLocaleString()}</div>;
}
function Parent() {
const tomorrowDate = () => {
return new Date();
};
return (
<Child minDate={tomorrowDate()} />
);
}
// Ignore this
ReactDOM.render(
<Parent />,
document.getElementById("react")
);<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>