Есть две компоненты одного уровня, мне нужно передать значение которое было получено в компоненте NavigationBar
в компоненту SearchLine
import React from 'react';
import NavigationBar from '../NavigationBar/NavigationBar';
import MainComponent from '../MainComponent/MainComponent';
class BaseComponent extends React.Component {
render() {
return(
<>
<NavigationBar />
<MainComponent />
</>
);
}
}
export default BaseComponent;
компонента SearchLine
содержится в MainComponent
import React from 'react';
import { Route, Redirect, Switch } from 'react-router';
import SearchLine from '../MainComponent/SearchLine/SearchLine';
class MainComponent extends React.Component {
render() {
return(
<>
<Switch>
<Route exact path="/all_songs/" component={SearchLine} />
<Route path="/">
<Redirect to="/all_songs/" />
</Route>
</Switch>
</>
);
}
}
export default MainComponent;
вот компонента NavigationBar
import React from 'react';
import { Link } from 'react-router-dom';
import './NavigationBar.css';
class NavigationBar extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {artName: ''};
}
handleChange(e) {
this.setState({artName: e.target.value});
}
render() {
const artistName = this.state.artistName;
return(
<div className="navBlock">
<img src={require('./search-solid.svg')} width={17} height={17} className="navImage"/>
<input
placeholder="Type in to Search..."
className="input-title"
value={artistName}
onChange={this.handleChange}
/>
<div className="navContainer">
<ul>
<Link to="/all_songs">All Songs</Link>
</ul>
</div>
<div className="container">
<ul>
<Link to="/albums">Albums</Link>
</ul>
</div>
</div>
);
}
}
export default NavigationBar;
Я не понимаю как мне правильно взять из NavigationBar
значение, которое было введено в input
, и передать его в SearchLine
?