Pass function elements to render in js

Question

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

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