I have a report generated by three parameters. An user and 2 range date fields.

e.g:
[![enter image description here](https://i.stack.imgur.com/bahaD.png)](https://i.stack.imgur.com/bahaD.png)

When all fields are filled, the report can be generated by **Gerar** button.

e.g when generated:
[![enter image description here](https://i.stack.imgur.com/HRWET.png)](https://i.stack.imgur.com/HRWET.png)

The problem i don't know how to handle happens now. When a value of any field is changed, report renders again. As well the values of **Motorista** and **Período** fields of header report, since those values come from the parameters.

Here is my code:

`useState` hooks of parameters:

```
const [selectedDriver, setSelectedDriver] = useState({});
const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());

```

`useState` that indicates when to show report or not:

```
const [renderPDF, setRenderPDF] = useState(false);

```

`Gerar button`:

```
          <Button
            type="submit"
            color="success"
            onClick={() => {
              setRenderPDF(false);
              handleEventsFromMatrix() //function that call an endpoint that brings data to the report
            }}
          >
            Gerar
          </Button>

```

`handleEventsFromMatrix()`, function that call an endpoint that brings data to the report:

```
async function handleEventsFromMatrix() {
    try {
      //rest of logic

      const response =
        await api.get(`endpoint`);

      if (response.data.generatedEvents.length > 0) {
        setRenderPDF(true);
      }
    } catch (err) {
      console.log(err);
    }
  }

```

Here is the validation rule to show **Informe o motorista e o período para o qual você deseja gerar relatório de diários de bordo** message or to bring report with data. `renderPDF` hook starts as false to bring the message and when request is succefully completed, turn it to true, bringing the report with data.

Message:

```
{!renderPDF &&
  //rest of logic

  <div>
    <h1>Informe o motorista e o período para o qual você deseja gerar relatório de diários de bordo</h1>
  </div>
}

```

Show report with data:

```
{renderPDF &&
  <PDFViewer style={styles.page}>

  //rest of logic
}

```

What am i missing here?