there are two components of the same level, I need to pass the value that was obtained in the NavigationBar component in the SearchLine component
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;
the SearchLine component is contained in the 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;
here is the NavigationBar component
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;
I do not understand how I can correctly take from NavigationBar the value that was entered into the input and transfer it to SearchLine