[Résolu] [React]: Valeur 'undefined'

Salut,
je rencontre un problème dans mon Component React, les this.props.path et this.props.content sont undefined dans React. Je bloque là-dessus depuis toute la journée xD

import React, { Component } from 'react';
// Components
import InsertLink from './InsertLink';

class NavigationBar extends React.Component {
	constructor() {
		super();
	}

	onStateChange(path) {
		const xhr = new XMLHttpRequest(),
			url = "./../src/server_actions/config.json";

		xhr.open("GET", url, true);
		xhr.send();

		xhr.addEventListener('readystatechange', () => {
			if(xhr.readyState === 4 && xhr.status == 200) {
		    	const jsonData = JSON.parse(xhr.responseText),
		    		returnPath = jsonData[path[0]][path[1]];

	    		return returnPath;
		    }
		}, false);
	}

	render() {
		return (
			<div className="page-part-content">
				<nav className="nav-bar">
					<a href="/">
						<div className="website-icon">
							<img src="../src/img/favicon.ico" alt="Website Icon" />
							<h1>pSearch:</h1>
							<h4>{this.onStateChange(['titles', 'homepageSub'])}</h4>
						</div>
					</a>
					<div className="content-wrapper">
						<button className="navbar-icon in-ms">
							<i className="fa fa-4x">?</i>
						</button>
						<div className="in-ds">
							<InsertLink path={this.onStateChange(['links', 'blog'])} class="text" content={this.onStateChange(['titles', 'blog'])} />
							<InsertLink path={this.onStateChange(['links', 'forum'])} class="text" content={this.onStateChange(['titles', 'forum'])} />
							<InsertLink path={this.onStateChange(['links', 'patchNotes'])} class="text" content={this.onStateChange(['titles', 'patchNotes'])} />
							<InsertLink path={this.onStateChange(['links', 'feedback'])} class="text" content={this.onStateChange(['titles', 'feedback'])} />
						</div>
						<div className="options">
							<InsertLink path={this.onStateChange(['links', 'authentication'])} class="text" content={this.onStateChange(['titles', 'authentication'])} />
							<button id="aside-options-icon">
								<i className="fa fa-3x">?</i>
							</button>
						</div>
					</div>
					<nav className="in-ms">
						<InsertLink path={this.onStateChange(['links', 'blog'])} class="text in-ms" content={this.onStateChange(['titles', 'blog'])} />
						<InsertLink path={this.onStateChange(['links', 'forum'])} class="text in-ms" content={this.onStateChange(['titles', 'forum'])} />
						<InsertLink path={this.onStateChange(['links', 'patchNotes'])} class="text in-ms" content={this.onStateChange(['titles', 'patchNotes'])} />
						<InsertLink path={this.onStateChange(['links', 'feedback'])} class="text in-ms" content={this.onStateChange(['titles', 'feedback'])} />
					</nav>
				</nav>
			</div>

		);
	}
}

export default NavigationBar;

import React, { Component } from 'react';

class InsertLink extends React.Component {
	render() {
		return (
			<a href={this.props.path} className={this.props.class}>
				{this.props.content}
			</a>
		);
	}
}

export default InsertLink;

Merci d'avance !

PS: Lorsque je fais un console.log sur ma variable 'returnPath' il n'y a aucun problème même en typeof il m'affiche string mais au rendu ...
Modifié par Soldat8889 (20 Aug 2018 - 23:48)