1

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) } ]} /> } </> }
Improve this question
3
  • Do you mean you want to show the code to the user on button click? Commented Jun 22, 2020 at 17:12
  • my function displays a chart from react-chartjs-2, both functions are different graphs. Commented Jun 22, 2020 at 17:13
  • I updated your question to reflect the real problem of chart display but you have to add some information of your charts to get your problem solved. Commented Jun 22, 2020 at 17:34

2 Answers 2

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks for your response, now the problem is that I need to refresh the page from buttons to change, how can I make them change just by clicking the button. I leave two graphs on the question.
Could you clarify what you mean by the buttons to change?
Yes, thanks for your patience. Now with the solution you provided, when I click one of the buttons, I need to reload the page in order to get contenidoNuevo or contenidoNuevo2. What I need is to change the data from contenidoNuevo , or update it (probably is the best word) with the data from contenidoNuevo2 without needing to reload again the page.
Make sure that you are calling the contenidoNuevo functions correctly in the constructor and the onClick functions. They should look like this.setState({content: contenidoNuevo()}). If this does not fix your issue, then your issue is with how you are getting your data. It sounds like you want to update your data when the button is clicked, but you are only getting it on page load. You can just add the code to load your data into each onClick function before setting the state, if that's what you wish to do.
0

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

Improve this answer

2 Comments

Thanks for your response, now the problem is that I need to refresh the page from buttons to change, how can I make them change just by clicking the button. I left the graphs in the comment section.
let me see if i understand you want to change the data in the component without reload the page right? when you do the setState the page will rerender

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.