Passare dati tra componenti in React con history push

Mattepuffo's logo
Passare dati tra componenti in React con history push

Passare dati tra componenti in React con history push

In React per navigare tra componenti abbiamo diverse possibilità.

Dopo aver scoperto che this.props.history.push ci permette anche di passare dei dati, sto usando solo questo.

E oggi vediamo proprio questo esempio.

Quindi da un componente andremo ad un secondo componente passandogli dei valori.

Poi riprenderemo questi valori nel secondo componente; cominciamo:

gotToPage = () => {
	this.props.history.push({
		pathname: '/aggiungi/',
		state: {
			editId: "10",
			editTitle: "titolo"
		}
	});
}

Io ho messo il codice in una arrow function, voi mettetelo dove più vi serve.

Adesso nel secondo componente abbiamo una cosa del genere:

constructor(props) {
	super(props);

	this.state = {
		editId: null,
		titlePage: null
	};
}

async componentDidMount() {
	if (typeof this.props.location.state != 'undefined') {
		this.setState({
			editId: this.props.location.state.editId,
			titlePage: this.props.location.state.editId
		});
	}
}

Prima di tutto creaimo due state a null, che poi andremo a valorizzare.

Nel componentDidMount controlliamo che ci siano i valori, sennò va in errore.

In caso li modifichiamo.

Enjoy!


Share this Post

Commentami!