I have a class component which can be viewed by 2 screens and 1 screen is passing props and 1 is not. so i want to set default value "" 0r empty if there are no props and if there are props then value should be based on props. but i'm unable to do so. Any help will be appreciated.. flow is like this.. main screen==> rating(without props so state should be empty)==>search screen==>rating(with props. state should get value from state)
class Rating extends Component {
constructor() {
super();
const propItem = this.props?.route.params.item;
this.state = {
brand : propItem != undefined ? propItem.brand : "",
i have tried componentDidMount but it cause infinite loop so does if i uset it in render method
getDerivedStateFromProps is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.
You need to pass the pros for constructor and super function.
class Rating extends Component {
constructor(props) {
super(props);
const propItem = this.props?.route.params.item;
this.state = {
brand : propItem != undefined ? propItem.brand : ""
}
}
render() {
<div></div>
}
}
class Rating extends Component {
constructor(props) {
super(props);
this.state = {
brand : this.props?.route.params.item != undefined ? this.props?.route.params.item.brand : ""
}}
render() {
<div></div>
}}
you can try like it, make sure your are passing item from previous screen in this.props.navigation