Skip to main content
adding example code
Origen Enlace

Tienes varias opciones, una puede ser tener los dos gráficos y mostrar uno o el otro de acuerdo a lo seleccionado:

<Form.Group style={ optionSelected != '1mes' ? { width: '50%', display: none } : { width: '50%' }}>
    <Dona_etiquetas />
</Form>
<Form.Group style={ optionSelected == '1mes' { width: '50%', display: none } : { width: '50%' }}>
    <Dona />
</Form>

Otra opción es mostrar el componente condicionalmente:

<Form.Group style={{ width: '50%' }}>
    {optionSelected == '1mes' ? <Dona /> : <Dona_etiquetas />}
</Form>

En ambos casos debes capturar el evento onChange así. En tu caso usando Hooks.

import React, { useState } from 'react';

function ... {
  const [optionSelected, setOptionSelected] = useState('1mes');

  const handleChange = event => {
    setOptionSelected(event.target.value);
  }

  return (
    ...
  )
}

Tienes varias opciones, una puede ser tener los dos gráficos y mostrar uno o el otro de acuerdo a lo seleccionado:

<Form.Group style={ optionSelected != '1mes' ? { width: '50%', display: none } : { width: '50%' }}>
    <Dona_etiquetas />
</Form>
<Form.Group style={ optionSelected == '1mes' { width: '50%', display: none } : { width: '50%' }}>
    <Dona />
</Form>

Otra opción es mostrar el componente condicionalmente:

<Form.Group style={{ width: '50%' }}>
    {optionSelected == '1mes' ? <Dona /> : <Dona_etiquetas />}
</Form>

En ambos casos debes capturar el evento onChange así.

Tienes varias opciones, una puede ser tener los dos gráficos y mostrar uno o el otro de acuerdo a lo seleccionado:

<Form.Group style={ optionSelected != '1mes' ? { width: '50%', display: none } : { width: '50%' }}>
    <Dona_etiquetas />
</Form>
<Form.Group style={ optionSelected == '1mes' { width: '50%', display: none } : { width: '50%' }}>
    <Dona />
</Form>

Otra opción es mostrar el componente condicionalmente:

<Form.Group style={{ width: '50%' }}>
    {optionSelected == '1mes' ? <Dona /> : <Dona_etiquetas />}
</Form>

En ambos casos debes capturar el evento onChange así. En tu caso usando Hooks.

import React, { useState } from 'react';

function ... {
  const [optionSelected, setOptionSelected] = useState('1mes');

  const handleChange = event => {
    setOptionSelected(event.target.value);
  }

  return (
    ...
  )
}
Origen Enlace

Tienes varias opciones, una puede ser tener los dos gráficos y mostrar uno o el otro de acuerdo a lo seleccionado:

<Form.Group style={ optionSelected != '1mes' ? { width: '50%', display: none } : { width: '50%' }}>
    <Dona_etiquetas />
</Form>
<Form.Group style={ optionSelected == '1mes' { width: '50%', display: none } : { width: '50%' }}>
    <Dona />
</Form>

Otra opción es mostrar el componente condicionalmente:

<Form.Group style={{ width: '50%' }}>
    {optionSelected == '1mes' ? <Dona /> : <Dona_etiquetas />}
</Form>

En ambos casos debes capturar el evento onChange así.