I have 2 components, the first component is "Register" as the parent component and the second component is "UserCountry", first I run the "UserCountry" component and send the state to the API to get the data "country list", then I set it to localStorage which will later I am passing to the "Register / parent" component, how do i set the state in the "Register" component to add data that I got from the "UserCountry" component?
this is my parent component "Register"
constructor(props){
super(props)
this.state = {
MEMBER_FIRST_NAME:'',
MEMBER_LAST_NAME:'',
MEMBER_EMAIL:'',
MEMBER_PASSWORD:'',
MEMBER_PASSWORD2:'',
ACCEPT_MARKETING:1
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e){
this.setState({
[e.target.name] : e.target.value
})
}
getIdCountry(){
return this.setState({
MEMBER_COUNTRY_ID:localStorage.getItem('country_id'),
MEMBER_COUNTRY_NAME:localStorage.getItem('country_name'),
})
}
componentDidMount(){
this.getIdCountry();
}
async handleSubmit(e){
e.preventDefault()
await Api.post('member/register' , this.state)
.then((response) => {
let responJson = response
console.log(responJson)
})
}
and this is a Child component "UserCountry" I will send the data obtained from the UserCountry component to the parent state of the "Register" component.
constructor(props){
super(props)
this.state = {
country: [],
};
this.handleSelect = this.handleSelect.bind(this)
}
async componentDidMount(){
await Api.get('user-country', this.state)
.then((response) => {
let responseJson = response
if(responseJson.data.STATUS_CODE === '200'){
// this.props.resSave('country', JSON.stringify(responseJson.data.DATA))
this.setState({
country:response.data.DATA
})
}else{
alert("ERR CONNECTION TIMEOUT")
}
})
}
handleSelect(e){
if (this.refs.idCountry) {
let strResult = this.refs.idCountry.value
let conToArray = strResult.split(",")
this.setState({
MEMBER_COUNTRY_ID:conToArray[0],
MEMBER_COUNTRY_NAME:conToArray[1]
})
this.props.resSave('country_id', conToArray[0])
this.props.resSave('country_name', conToArray[1])
}
}
so later I hope like this (parent component)
constructor(props){
super(props)
this.state = {
MEMBER_FIRST_NAME:'',
MEMBER_LAST_NAME:'',
MEMBER_EMAIL:'',
MEMBER_PASSWORD:'',
MEMBER_PASSWORD2:'',
ACCEPT_MARKETING:1,
// new properties and values obtained from child components
MEMBER_COUNTRY_ID:localStorage.getItem('country_id'),
MEMBER_COUNTRY_NAME:localStorage.getItem('country_name'),
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
I have tried it several times, the property has been successfully added but the value from localStorage I did not get