CODEWITHSUNDEEP
javascriptreactjschart.js
Jorge De La Vega Carrasco
Jorge De La Vega Carrasco

Reputation: 65

React - Display Chart when button is clicked

I would like to display a chart using any one of the two function depending on button click. The functions are this.contenidoNuevo() and this.contenidoNuevo2(). If the user clicks btn1 then chart of this.contenidoNuevo() would be displayed and if the user clicks btn2 then this.contenidoNuevo2(). Also, chart of this.conetnidoNuevo() should be displayed when rendering, since its the default. Thanks for your help.

Functions:

onClick1 = () => {
        return <>
            {this.contenidoNuevo()}
        </>
}
onClick2 = () => {
        return <>
            {this.contenidoNuevo2()}
        </>
}

render():

<div className="row"
     <button id="btn1" onClick={() => {this.onClick1()}}>
        Option 1
     </button>
     <button id="btn2" onClick={() => {this.onClick2()}}>
        Option 2
     </button>    
     {this.contenidoNuevo()}                                
</div>

Function contenidoNuevo with chart:

 contenidoNuevo = () => {
        var Obj = this.state.difference_days;
        var data0 = {}
        var data1 = {}

        return <>
            {Obj == 0 &&  

                <Card
                    title="Conversaciones"
                    chartType="line"
                    labels={Object.keys(this.state.concurrency)}

                    datasets={[
                        {
                            label: 'Número de conversaciones actuales',
                            fill: false,
                            lineTension: 0.1,
                            backgroundColor: '#F07C30',
                            borderColor: '#FA6A01',
                            borderCapStyle: 'butt',
                            borderDash: [],
                            borderDashOffset: 0.0,
                            borderJoinStyle: 'miter',
                            pointBorderColor: '#F07C30',
                            pointBackgroundColor: '#FA6A01',
                            pointBorderWidth: 1,
                            pointHoverRadius: 5,
                            pointHoverBackgroundColor: '#F07C30',
                            pointHoverBorderColor: '#FA6A01',
                            pointHoverBorderWidth: 2,
                            pointRadius: 1,
                            pointHitRadius: 10,
                            data: Object.values(this.state.concurrency)
                        },
                        {
                            label: 'Número de conversaciones anteriores',
                            fill: false,
                            lineTension: 0.1,
                            backgroundColor: '#FC4C0126',
                            borderColor: '#FC4C0126',
                            borderCapStyle: 'butt',
                            borderDash: [],
                            borderDashOffset: 0.0,
                            borderJoinStyle: 'miter',
                            pointBorderColor: '#C73C00',
                            pointBackgroundColor: '#FC4C01',
                            pointBorderWidth: 1,
                            pointHoverRadius: 5,
                            pointHoverBackgroundColor: '#FC4C01',
                            pointHoverBorderColor: '#C73C00',
                            pointHoverBorderWidth: 2,
                            pointRadius: 1,
                            pointHitRadius: 10,
                            data: Object.values(this.state.horario_uso_before)
                        }
                    ]}
                />             
            }
</>
    
    }

Function contenidoNuevo2 with chart:

contenidoNuevo2 = () => {
        var Obj = this.state.difference_days;

        return <>
            {Obj == 0 && 
                <Card
                    title="Conversaciones"
                    chartType="line"
                    labels={Object.keys(this.state.horario_uso_before)}

                    datasets={[
                        {
                            label: 'Número de conversaciones actuales',
                            fill: false,
                            lineTension: 0.1,
                            backgroundColor: '#F07C30',
                            borderColor: '#FA6A01',
                            borderCapStyle: 'butt',
                            borderDash: [],
                            borderDashOffset: 0.0,
                            borderJoinStyle: 'miter',
                            pointBorderColor: '#F07C30',
                            pointBackgroundColor: '#FA6A01',
                            pointBorderWidth: 1,
                            pointHoverRadius: 5,
                            pointHoverBackgroundColor: '#F07C30',
                            pointHoverBorderColor: '#FA6A01',
                            pointHoverBorderWidth: 2,
                            pointRadius: 1,
                            pointHitRadius: 10,
                            data: Object.values(this.state.horario_uso_before)
                        },
                        {
                            label: 'Número de conversaciones anteriores',
                            fill: false,
                            lineTension: 0.1,
                            backgroundColor: '#FC4C0126',
                            borderColor: '#FC4C0126',
                            borderCapStyle: 'butt',
                            borderDash: [],
                            borderDashOffset: 0.0,
                            borderJoinStyle: 'miter',
                            pointBorderColor: '#C73C00',
                            pointBackgroundColor: '#FC4C01',
                            pointBorderWidth: 1,
                            pointHoverRadius: 5,
                            pointHoverBackgroundColor: '#FC4C01',
                            pointHoverBorderColor: '#C73C00',
                            pointHoverBorderWidth: 2,
                            pointRadius: 1,
                            pointHitRadius: 10,
                            data: Object.values(this.state.concurrency) 
                        }
                    ]}
                /> 
                
            }
            
        </>
    
    }

Upvotes: 1

Views: 2646

Answers (2)

TalOrlanczyk
TalOrlanczyk

Reputation: 1213

Instead of return component consider do the following:

import React, { Component } from 'react';
class Datas extends Component {
    constructor(props){
        super(props)
        this.state = {
                data: ''
        }
    }
    onClick1 = () => {
        this.setState({ data: <h1>d</h1> });
       
    }
    onClick2 = () => {
        this.setState({ data: <h2>d</h2> });
        
    }
    render() {
        return (
            <div className="row">
                <button id="btn1" onClick={() => { this.onClick1() }}>
                    Option 1
                </button>
                <button id="btn2" onClick={() => { this.onClick2() }}>
                    Option 2
                </button>
                {this.state.data}
            </div >
        )
    }
}
export default Datas;

like this whe you print this state it will change base on the button you press

Upvotes: 0

Joseph Hines
Joseph Hines

Reputation: 81

It seems that your approach is slightly incorrect here. The React component maintains its own state. In your case, this state is the content to display. Then, all that your buttons will do is change the value of this state, which triggers a re-render automatically. An example component reworked in this way would look like the following

const contenidoNuevo = "First content"
const contenidoNuevo2 = "Second content"

class App extends React.Component {
  constructor(){
    super();
    this.state = {content: contenidoNuevo}
  }
  
  onClick1 = () => {
        this.setState({content: contenidoNuevo})
  }
  onClick2 = () => {
        this.setState({content: contenidoNuevo2})
  }
  
  render() {
    return (
      <div className="row">
        <button id="btn1" onClick={() => {this.onClick1()}}>
          Option 1
         </button>
      <button id="btn2" onClick={() => {this.onClick2()}}>
        Option 2
     </button>    
     {this.state.content}                                
    </div>
    )
  }
}

You can change the onClick methods to call functions instead of just setting the value, if that better fits your use case.

Upvotes: 2

Related Questions