0

I have in js a class function called contenidoNuevo() which triggers depending on the difference of dates I have in my web application. In the else statement I have a Card class which includes the line chart from react-chartjs-2. I would like to trigger the contenidoNuevo class in my render component. Now if my difference of days is different than 0, what displays is the Hola George!, if dates are different than 0, I want to display the graph. How can I achieve it? Thanks!

contenidoNuevo function:

contenidoNuevo = () => {
   if (this.state.difference_days != 0) {
     return <h1>Hola George!</h1>
   }
   else {
     console.log(this.state.prueba)

     <Card
         title="Conversaciones por día del mes"
         chartType="line"
         labels={Object.keys(this.state.day_month_conversation)}
         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.day_month_conversation)   
             }
         ]}
     />

    return Card
}

render():

render() {
  return (
   .
   .
   .

  <div className="row">
    <div className="col-12 mb-30">
      {this.contenidoNuevo()}
    </div>
  </div>
}

1 Answer 1

1

Suposing that you are using react-native (i mean building an application) and the card is already created, try to replace you function for the next code:

function contenidoNuevo () {
    var Obj = this.state.difference_days;

    return <>

        {Obj != 0 &&
            <View>Hola George!</View>
        }

        {Obj == 0 && 
            <Card
                title="Conversaciones por día del mes"
                chartType="line"
                labels={Object.keys(this.state.day_month_conversation)}
                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.day_month_conversation)
                    }
                ]}
            />
        }
    </>
}

I hope it helped you.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.