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><Linkto="weatherAr">Arabic</Link><button><button><Linkto="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):

importReactfrom'react'exportdefaultReact.createClass({
  render() {
    return<div><divclassName="main">
          // Here you can access the value:
          {this.props.imagedayA}
          <imgclassName="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

exportdefaultclassWeather extends React.Component {
  ...your implementation...
}

And then

EngWeather.jsimportWeatherfrom'./Weather'exportdefaultclassEngWeatherextendsWeather {
  ...your implementation...
}