How Can Set Component To Button In React.js

this is my code screenshot index.html index.js import React from 'react'; import ReactDOM from 'react-dom'; import $ from 'min-jquery'; import axios from 'axios'; import { rende

Solution 1:

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>
  }
})

Solution 2:

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...
}