ReactJs how to pass state in react router to components reactjs pass props,reactjs pass function as prop,reactjs pass

im trying to make a seperate page / component for searching and am wondering how i would pass the state to a different component ? i want to copy and paste everything in the render/return part into a different component and then access that page using react router, how would I do that? any help is greatly appreciated!

    import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Weather from "./Weather.js";
import Skycons from "react-skycons"
import { geticon } from "./geticon.js"

import ToggleDisplay from 'react-toggle-display';
import Form   from "./Form.js";
import Layout from "./layout.js";
import Hike  from "./Hike.js";
import 'bootstrap/dist/css/bootstrap.min.css';

import {FormControl, FormGroup, ControlLabel, HelpBlock, Checkbox, Radio, Button} from 'react-bootstrap';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";



const API_KEY = "2a41aeea56aabfb9ff1218730fc32426";

 class App extends React.Component {

  state = {
    temperature: "",
    city: "",
    city2:"",
    country: "",
    msg: "",
    pressure: "",
    humidity: "",
    description: "",
    rain:"",
    main:"Drizzle",
    icon: "09d",
    error: "",
    date: "",
    month:"",
    lat:"",
    show: false,
    lng:"",
    year:"",
    clouds:""

  }

  handlenum1Change (evt) {



let temp = (evt.target.value);




}

  getDate() {
   var date = new Date().getDate();
      var month = new Date().getMonth() + 1;
      var year = new Date().getFullYear();

   this.setState({ date,year,month});

}

 componentDidMount() {
    this.getDate();
  }


  getWeather = async (e) => {
    e.preventDefault();

      this.setState({ showResults: true });
    const city = e.target.city.value;

    const api_call = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`);
    https://www.hikingproject.com/data/get-trails-by-id?ids=7000108,7002175,7005207,7001726,7005428&key=YOU
    const data = await api_call.json();

    if (city) {
      this.setState({
        temperature: data.main.temp,
        city: data.name,
        clouds:data.clouds.all,
        main: data.weather[0].main,
        icon: data.weather[0].icon,
        rain: data.rain,
        pressure: data.main.pressure,
        humidity: data.main.humidity,
        description: data.weather[0].description,
        error: ""
      });

    } else {
      this.setState({
        temperature: undefined,
        city: undefined,
        country: undefined,
        humidity: undefined,
        description: undefined,
        pressure:undefined,
        rain : undefined,
        error: "Please enter the values."
      });
    }

var clouds= data.clouds.all;

if (clouds>30){
this.setState({
  msg:" Poor  conditions for stargazing!! "
})
}
  else{

   this.setState({
  msg: " Good conditions for stargazing! no rain in forecast! "
})
  }

}




  getTrail = async (e) => {
    e.preventDefault();


    const city = e.target.city2.value;
  this.setState({
      show: !this.state.show
    });

    const country = e.target.country.value;


    const api_call = await fetch(`https://api.wunderground.com/api/b1049a092a7f69ea/astronomy/q/${country}/${city}.json`);

    const data = await api_call.json();

   if (city) {
      this.setState({
        moon_phase: data.moon_phase.ageOfMoon,
        moon_hour: data.moon_phase.hemisphere,
          moon_rise: data.moon_phase.moonrise.hour,
           moon_rises: data.moon_phase.moonrise.minute,
        moon_state: data.moon_phase.phaseofMoon,
        moon_set: data.moon_phase.moonset.hour,
       moon_sets: data.moon_phase.moonset.minute,
        sunset: data.sun_phase.sunset.hour,
         sunsets: data.sun_phase.sunset.minute,
         sunrise:data.sun_phase.sunrise.hour,
         sunrises:data.sun_phase.sunrise.minute


      });
    } else {
      this.setState({
         moon_phase: undefined,
        sunset: undefined
      });
    }
  }




//   const BasicExample = () => (
//   <Router>
//     <div>
//       <ul className="navbar-nav ml-auto">

//         <li className="nav-item">
//           <Link to="/about">About</Link>
//         </li>
//         <li className="nav-item">
//           <Link to="/topics">Topics</Link>
//         </li>
//       </ul>

//       <hr />

//       <Route path="/about" component={About} />
//       <Route path="/topics" component={Topics} />
//     </div>
//   </Router>
// );


  render() {
    return (
      <div>


      <div>
        <br></br><br></br><br></br><br></br><br></br><br></br> 
      <div className="container">

    <div className="row">

      <div id="city">

              <div className="form-group mb-2">

                <div className="form-group mx-sm-3 mb-2">


                  <form className="form-inline" onSubmit={this.getWeather} >

                  <input type="text" name="city"  className="form-control" onChange={this.handlenum1Change} placeholder="Input City..."/>


    <button className="btn btn-primary">Get Weather</button>


    </form> 


                  <Weather className="fish"
                    city={this.state.city}
                    temperature={this.state.temperature}
                    humidity={this.state.humidity}
                 clouds={this.state.clouds}
                       pressure={this.state.pressure}
                    description={this.state.description}
                    rain={this.state.rain}
                    icon={this.state.icon}
                    error={this.state.error}
                  />

 <h3> {this.state.msg} </h3>

          <div className="clearfix"> 

      <div className="date"><p id="d"> {this.state.date}/{this.state.month}/{this.state.year}</p> 


<div>
    <Form getTrail={this.getTrail} />





              {this.state.moon_phase &&   <div> moon_phase: {this.state.moon_phase}</div>  }
               {this.state.sunset && this.state.sunsets && <div className="row"> <p> sunset Time: {this.state.sunset} </p> : <p> {this.state.sunsets} </p> </div> }

               {this.state.sunrise && this.state.sunrises &&  <div className="row"> <p> sunrise  Time: {this.state.sunrise} </p> : <p> {this.state.sunrises} </p></div> }

                   {this.state.moon_set && this.state.moon_sets && <div className="row"> <p> moonset:  {this.state.moon_set} </p> : <p> {this.state.moon_sets} AM</p> </div> }

                <div class="w-100"> </div>
                  {this.state.moon_rise && this.state.moon_rises &&    <div className="row">     <p>moonrise - {this.state.moon_rise} </p> : <p> {this.state.moon_rises} PM</p> </div> }



               {this.state.moon_state &&   <p> {this.state.moon_state} moon  </p> }
               {this.state.moon_hour && <p> hemisphere: {this.state.moon_hour} </p>  }
 </div>
 </div>
 </div>

</div>
</div>
 </div>

 </div>
 </div>
 </div>

 </div>


     );
  }
};

export default App;
Answer:1

Firstly. Passing the state around:

The way you pass state to a different component is using react-redux

You set up a global state, then access it through connect

import { connect } from 'react-redux';

https://redux.js.org/basics/usage-with-react

--

Secondly. If you want to use a component in another component, you just call that component and pass through the props.

Super Basic Example.

import Products from '../../components/Products';
import ContentRow from '../../components/contentRow';

export default class Shop extends React.PureComponent {
  render() {

    return (

      <div>
        <ContentRow
         imageURL="https://placeimg.com/400/400/nature"
         shortText="This is the short text that will display"
        />
        <Products></Products>
      </div>
    );
  }
}

Where the <contentRow shortText="..."> is a props that you are passing through to the component that renders.

Hope this helps.

Answer:2

If I understood you correctly, so you need to use render instead of component in react-router

  <Route path="/about" render={()=> <About parentState={this.state} />} />

And you can access them in About component like

this.props.parentState.main // should render "Drizzle"
Answer:3

you need to send that state as props to component you want using render at Route, like that: <Route path='/component' render={(props) => <MyComponent {...props} state={this.state} />} />

Answer:4

First in your index.js file you want to wrap <App> with a Router

    ReactDOM.render(
        <Router>
            <App />
        </Router>
      document.getElementById('root')
    );

Second step: in app.js in the render() you can wrap everything in a <Switch>. Inside the switch you make your routes with each one having whatever component(s) you want to display.

    render(){
        return(
            <div>
              <Switch>
                <Route exact path="/"> {/* needs to say "exact" for routes that 
                                         will be duplicated like "/" which is in 
                                         every route */}
                  <div>
                    <Weather/>
                    <Form/>
                  </div>
                </Route>

                <Route to="/">
                    <SearchComponent>
                </Route>
              </Switch>
            </div>
    )}

So thats how router works. For your other question, there a couple tricks ill give you because im not sure what you need:

You can pass the whole state simply by sending it as a prop to a component:

`<Weather state={this.state}/>`

I doubt this is best practices but its good to know how react works. If you wanted to change the state from the child component Weather you would have to pass it a function as well that handles changes with something similar to this:

    changeState = (newState) => {
        this.setState(newState);
    }
    <Weather state={this.state} changeParentState={this.changeState}/>
    enter code here

Inside Weather:

    componentDidMount() {
        this.setState({parentState: this.props.state)}
    }

And when you need to update the parent state : 

    this.props.changeParentState(newState);

Another React tip is if you want to have a component inside another component you can do this:

<App>
 <ChildComponent/>
</App>

and by putting this.props.children into the Render statement it will display that component!

(inside App)

    render() {
       return(
               <div>
                 anything you want to add
                 {this.props.children}
                 </div>
             )
    }
Answer:5



  1. reactjs pass props
  2. reactjs pass function as prop
  3. reactjs pass state to child
  4. reactjs pass component as prop
  5. reactjs pass data from child to parent
  6. reactjs pass data from one component to another
  7. reactjs pass state to parent
  8. reactjs pass function as prop to child component

I have react-beautiful-dnd horizontal multiple list(6 rows with the same items in each row) with the same items in each list. I want to delete individual selected items from each list, but just having ...

I have react-beautiful-dnd horizontal multiple list(6 rows with the same items in each row) with the same items in each list. I want to delete individual selected items from each list, but just having ...

I have a state called changedFields which is a list that contains the changed field when editing data. <Dialog open={this.state.isDialogOpen} onClose={this.handleClose} ...

I have a state called changedFields which is a list that contains the changed field when editing data. <Dialog open={this.state.isDialogOpen} onClose={this.handleClose} ...