how can set component to button in react.js

Question

this is my code screenshot

index.js

import React  from 'react';
import ReactDOM from 'react-dom';
import $ from "min-jquery";
import axios from "axios";
import { render } from 'react-dom'
import WeatherEng from './weatherEng'
import WeatherAr from './weatherAr'
import {Link} from 'react-router';


const urlP=`http://localhost:3000/`;

class App extends React.Component {
constructor(props){
    super(props);
    this.state={ 
      imagedayA:[],
      imagenightA:[]
      };
      this.componentDidMount();
  }
   componentDidMount() {
     axios.get(urlP)
            .then(function (response) {
              console.log(response.data,"this is response")
              this.setState({
                imagedayA:response.data.today.iconday,
                imagenightA:response.data.today.iconnight
              })  
          }.bind(this))
            .catch(function (response) {
              console.log(response);
          });
      }
  render(){
    return (
       <div>
              <button><Link to="weatherAr">Arabic</Link><button>
             <button><Link to="weatherEng">English</Link></button>    
             <div>{this.props.children}</div> 

     </div>

    );
  };
}


render(<App/>,document.querySelector('.container'));

first component

import React from 'react'
export default React.createClass({
  render() {
    return <div>

     <div className="main">
          <img className="bar_en" src="/images/bar_en.png" />  
          <img className="today-en" src="/images/today_en.png"/>
          <img className="tomorrow-en" src="/images/tomorrow_en.png"/>

          <img className="today_img" src={this.props.data.imagedayA}/>
          <p className="tempdayA">{this.props.data.tempdayA}<span className="degree">&deg;</span></p>
          <img className="night_img" src={this.props.data.imagenightA}/>
          <p className="tempnightA">{this.props.data.tempnightA}<span className="degree">&deg;</span></p>

          <img className="line" src="/images/divider.png"/>
          <img className="linedown" src="/images/divider.png"/>

          <img className="tomday_img" src={this.props.data.imagedayB}/>
          <p className="tempdayB">{this.props.data.tempdayB}<span className="degree">&deg;</span></p>
          <img className="tomnight_img" src={this.props.data.imagenightB}/>
          <p className="tempnightB">{this.props.data.tempnightB}<span className="degree">&deg;</span></p>
          <a href="http://arabiaweather.com" target="_blank"><img className="aw" src="/images/aw.png" /></a>
     </div> 
   </div>
  }
})

second component

and app.js contain this code

import Index from './index'
import WeatherEng from './weatherEng'
import WeatherAr from './weatherAr'

import {Router, hashHistory, Route} from 'react-router'
ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={Index}>
        <Route path="Arabic" component={WeatherAr}/>
        <Route path="english" component={WeatherEng}/>
    </Route>
  </Router>, document.queryString('.container')
)

the main idea want to main page be just contain buttons of arabic ,english and when click on arabic /english go to arabic/english component with this.state which is contain data that i set to it from url in index

Note just copy link for screenshots

Please don't include code as screenshots - it makes it harder for your question to be found in search, and isn't friendly towards people who are using screen readers. You should edit the relevant sections of code into your question. — Joe Clay, Feb 02 '17 at 13:18
how i can set compnent page to button so when click on this button it get component page — flower, Feb 02 '17 at 13:35
i see you are using Link component , check if this question helps http://stackoverflow.com/questions/30115324/pass-props-in-link-react-router — semuzaboi, Feb 02 '17 at 13:39
Why do you need this.componentDidMount(); in the constructor?, componentDidMount should be called automatically. — Hosar, Feb 02 '17 at 14:23

Hosar · Answer 1 · 2017-02-02T14:34:52.723

0

You can pass the values as props to your child components.
In your app component add:

render(){
    return (
       <div>
              <button><Link to="weatherAr">Arabic</Link><button>
             <button><Link to="weatherEng">English</Link></button>    
             {React.cloneElement(this.props.children, { imagedayA: this.state.imagedayA, imagenightA: this.state.imagedayA})}

     </div>

    );

This will allow you to read the value of imagedayA as props in your child components.
Now you can do (WeatherAr):

import React from 'react'
export default React.createClass({
  render() {
    return <div>

     <div className="main">
          // Here you can access the value:
          {this.props.imagedayA}
          <img className="bar_en" src="/images/bar_en.png" />  
          // more code ...
     </div> 
   </div>
  }
})

edited Feb 02 '17 at 14:34

answered Feb 02 '17 at 14:22

Hosar

5,163
3
26
39

why it give me error ERROR in ./views/index.js Module build failed: SyntaxError: Expected corresponding JSX closing tag for – flower Feb 02 '17 at 14:38
ERROR in ./views/index.js Module build failed: SyntaxError: Expected corresponding JSX closing tag for – flower Feb 02 '17 at 14:48
I copied and pasted your code, is missing a closing tag on ** – Hosar Feb 02 '17 at 19:59
Uncaught Error: s rendered outside of a router context cannot navigate.(…) i got this error – flower Feb 04 '17 at 17:37

mitch3ls · Answer 2 · 2017-02-02T15:26:11.233

0

You could have an external js file, that handles your images, and import it in both of your components.

Weather.js

export default class Weather extends React.Component {
  ...your implementation...
}

And then

EngWeather.js

import Weather from './Weather'

export default class EngWeather extends Weather {
  ...your implementation...
}

edited Feb 02 '17 at 15:26

answered Feb 02 '17 at 15:15

mitch3ls

18
5

how can set component to button in react.js

2 Answers2

Linked