How To Send Data From Dialog Back To Parent Container With React?
I have a react-big-calendar (The parent container), I have also a select which, the events of the calendar are fetched according to this select ( doctor name ) and I have a button
Solution 1:
I think, you can achieve it using code like this:
export default ComponentA extends Component {
// set localStorage to bar state value
// via click or whatever ...
foo () {
this.setState({
bar: localStorage.getItem('bar')
})
}
render () {
// send the value of state to ComponentB
return <ComponentB foo={this.state.bar}>
}
}
Into your component
export default class ComponentB extends Component {
render () {
// display the value of foo prop
return <div>{this.props.foo}</div>
}
}
Note: You can always try to get the content of your localStoragedirectly from the ComponentB(Maybe using ComponentDidUpdate???) but the way I show you is better.
Solution 2:
Don't save events in your state, in Popup access the events directly from props.
In your Calendar, create a function that'll update the state.
updateEvents = (events, callback = () => {}) => {
this.setState(
{
events
},
callback
);
};
<Popup updateEvents={this.updateEvents} ref={this.ModalAjoutb} id_user={this.state.id_user} events={this.state.events} />
Popup
export default class Popup extends Component {
constructor(props) {
super(props);
}
handleAjouterb = id_user => {
this.setState(
{
openPopupAjout: true,
id_user
},
() => {
this.fetchingPopup(
this.state.id_user,
this.state.identifiant_user,
this.state.nom_user
);
}
);
};
fetchingPopup = (id_user, identifiant_user, nom_user) => {
const praticiensCached = JSON.parse(
localStorage.getItem('Liste de praticiens ')
);
for (let j = 0; j < praticiensCached.length; j++) {
if (id_user === praticiensCached[j].id_user) {
identifiant_user = praticiensCached[j].identifiant_user;
this.setState({ nom_user: praticiensCached[j].nom_user });
}
}
handleValider = event => {
event.preventDefault();
const praticiensCached = JSON.parse(
localStorage.getItem('Liste de praticiens ')
);
for (let j = 0; j < praticiensCached.length; j++) {
if (this.state.id_user === praticiensCached[j].id_user)
this.state.identifiant_user = praticiensCached[j].identifiant_user;
}
const formData = new FormData();
formData.append('identifiant_user', this.state.identifiant_user);
formData.append('heuredebut', this.state.tranchesC[0].startC);
formData.append('heurefin', this.state.tranchesC[0].endC);
formData.append('libelleconge', this.state.libelle);
axios({
method: 'post',
url: process.env.REACT_APP_API_BACKEND + 'add_event_docteur',
data: formData,
headers: {
'Content-Type': 'application/json',
Accept: 'application/json'
}
}).then(() => {
fetch(
process.env.REACT_APP_API_BACKEND +
'get_liste_planning/start=' +
moment()
.startOf('isoweek')
.subtract(14, 'days')
.toJSON() +
'&end=' +
moment()
.endOf('isoweek')
.add(2, 'months')
.toJSON() +
'&identifiant_user=' +
this.state.identifiant_user
)
.then(Response => Response.json())
.then(data => {
let evts = data.ListeResult;
for (let i = 0; i < evts.length; i++) {
evts[i].start = moment(evts[i].start).toDate();
evts[i].end = moment(evts[i].end).toDate();
}
this.props.updateEvents(evts, () => {
localStorage.setItem(
'Liste récente de planning de ' + this.state.nom_user,
JSON.stringify(evts)
);
localStorage.removeItem(
'Liste de planning de ' + this.state.nom_user
);
localStorage.setItem(
'Liste de planning de ' + this.state.nom_user,
JSON.stringify(evts)
);
});
});
});
};
};
render() {
return (
<div>
<Dialog
icon="application"
onClose={this.handleClose}
title="Organisation des plannings du docteur"
{...this.state}
isOpen={this.state.openPopupAjout}
>
<Input
id="libelle"
style={{ width: '480px' }}
value={this.state.libelle}
onChange={this.handleInputChange('libelle')}
/>
<label className="pt-label .modifier">
<strong>Date</strong>
</label>
<LocaleProvider locale={fr_FR}>
<RangePicker
id="date"
name="date"
locale="fr"
placeholder={['Date de début', 'Date de fin']}
separator="-"
onChange={this.handleDateCChange}
value={this.state.dateIC}
format="DD/MM/YYYY"
allowClear={false}
/>
</LocaleProvider>
<label className="pt-label .modifier">
{' '}
<strong>Heure de début</strong>
</label>
<Time
value={el.startC}
onChange={time => this.handleKeyboardStartCChange(i, time)}
style={heure}
disableUnderline={true}
inputComponent={TextMaskCustom}
endAdornment={
<InputAdornment position="end" style={{ opacity: '0.4' }}>
{' '}
<IconButton
onClick={() => this.openDialogC(i, el.startC, 'startC')}
>
<i style={{ fontSize: '18px' }} className="zmdi zmdi-alarm" />
</IconButton>{' '}
</InputAdornment>
}
/>
<label className="pt-label .modifier">
{' '}
<strong>Heure de fin</strong>
</label>
<Time
value={el.endC}
onChange={time => this.handleKeyboardEndCChange(i, time)}
style={heure}
disableUnderline={true}
inputComponent={TextMaskCustom}
endAdornment={
<InputAdornment position="end" style={{ opacity: '0.4' }}>
{' '}
<IconButton
onClick={() => this.openDialogC(i, el.endC, 'endC')}
>
<i style={{ fontSize: '18px' }} className="zmdi zmdi-alarm" />
</IconButton>
</InputAdornment>
}
/>
<Clock
maxWidth="xs"
open={this.state.isOpenC}
onBackdropClick={this.closeDialogC}
>
<TimePicker
mode="24h"
value={this.createDateFromTextValueC(this.state.datePickerValueC)}
onChange={this.handleDialogCChange}
/>
<DialogActions>
{' '}
<ButtonOk onClick={this.closeDialogC} color="primary">
{' '}
Ok{' '}
</ButtonOk>
</DialogActions>
</Clock>
<AnchorButton
style={{ display: 'inline-block' }}
intent={Intent.SUCCESS}
onClick={this.handleValider}
>
Valider
</AnchorButton>
</div>
);
}
}
Solution 3:
Why not you use context Feature of React React Context API
context.js
export const store = {
something: 'val',
setSomeThing : () => {}
};
export const CalContext = React.createContext(
store // default value
);
pop-up.js
import {CalContext} from './context';
class Popup extends React.Component {
updateValue = () => {
this.context.setSomeThing('new_value');
}
render() {
let calContext = this.context;
return (
<button onClick={this.updateValue} >
{calContext.something}
</button>
);
}
}
Popup.contextType = CalContext;
export default Popup;
calender.js
import {CalContext} from './context';
import Popup from './pop-up'
class calender extends React.Component {
constructor(props) {
this.state = {
something : 'value'
}
}
setSomeThing = (newVal) => {
// actual set something code.
this.setState({something : newVal});
}
render() {
let contextVal = { something : this.state.something, setSomeThing : this.setSomeThing }
// The entire state is passed to the provider
return (
<CalContext.Provider value={contextVal}>
<Popup />
</CalContext.Provider>
);}
}
Solution 4:
Are you looking for something like this
class ComponentB extends React.Component{
render(){
this.props.setInLocalStorage();
const value = localStorage.getItem("testA");
return <div>
This is componentB{value}
</div>}
}
class ComponentA extends React.Component{
setInLocalStorage = ()=>{
localStorage.setItem('testA', 'Hello');
}
render(){
return <ComponentB setInLocalStorage={this.setInLocalStorage}/>
}
}
Solution 5:
You can either use React Context API or Redux.
But if you don't want those, you can use a prop that is a method in your child component, so the parent can capture the event. It is similar Output mechanic from Angular 2+.
Here is an example:
const ChildComponent = (onSelect = () => {}) => {
return <div onClick={() => onSelect('You selected me')}>Child Component</div>
}
const ParentComponent = () => {
return <ChildComponent onSelect={message => console.log(message)} /> // You selected me
}
Post a Comment for "How To Send Data From Dialog Back To Parent Container With React?"