Function is declared but its value is never used

Question

I am trying to create a dropdown menu carrying some checkboxes. I found this reference and think is very valuable. I was implementing it in my example code but I get the function is declared but its value is never used error and don't understand why.

Below the snippet of code I am using:

import React from 'react';
import styled from 'styled-components';
import { Table } from 'reactstrap';
import GoogleMapReact from 'google-map-react';
import { Card, CardImg, CardText, CardBody, CardTitle, /*CardSubtitle,*/ Button } from 'reactstrap';

const MapContainer = styled.div`
some data....
`;

var expanded = false;
function showCheckboxes() {
    var checkboxes = document.getElementById('checkboxes');
    if (!expanded) {
        checkboxes.style.display = 'block';
        expanded = true;
    } else {
        checkboxes.style.display = 'none';
        expanded = false;
    }
}

const BoatMap = () => (
    <div className="google-map">
        <GoogleMapReact
            bootstrapURLKeys={{ key: 'MY_KEY' }}
            center={{
                lat: 42.4,
                lng: -71.1
            }}
            zoom={11}
        >
            {/* Insert components here */}
            <form>
                <div class="multiselect">
                    <div class="selectBox" onClick="showCheckboxes()">
                        <select>
                            <option>Select an option</option>
                        </select>
                        <div class="overSelect" />
                    </div>
                    <div id="checkboxes">
                        <label for="one">
                            <input type="checkbox" id="one" />First checkbox
                        </label>
                        <label for="two">
                            <input type="checkbox" id="two" />Second checkbox
                        </label>
                        <label for="three">
                            <input type="checkbox" id="three" />Third checkbox
                        </label>
                    </div>
                </div>
            </form>
        </GoogleMapReact>
    </div>
);

export default function GoogleMap() {
    return (
        <MapContainer>
        </MapContainer>
    );
}

What I have done so far:

Apart from doing a good amount of research, I was looking through this document to make sure everything is correctly set. I think it is.

I also found this useful post which carries a lot of information and dug a little bit in it, but I am not sure is completely connected with my error.

I used <form>, even though I am still learning this type of components and thought it could be a good exercise. I am not sure if the error could be due to that at this point.

Thanks for pointing in the right direction for solving it.

*"function is declared but its value is never used"* where are you getting this? Which function is this refering about? — Calvin Nunes, Jan 23 '20 at 19:11
@CalvinNunes, thanks for reading the question. this is where it is from: `'showCheckboxes' is defined but never used` — Emanuele, Jan 23 '20 at 19:13
@AndrewLohr, thanks for reading the question. Unfortunately still same error. I wonder is I declared the `function showCheckboxes()` in the correct place — Emanuele, Jan 23 '20 at 19:22
it would be `onClick={showCheckboxes}` (without `this` keyword) since the function is outside the BoatMap function. — wizloc, Jan 23 '20 at 19:24
@wizloc, thanks it works! :) if you post the answer I can accept it! — Emanuele, Jan 23 '20 at 19:26

score 1 · Accepted Answer · answered Jan 23 '20 at 19:29

1

Since showCheckboxes is declared outside of BoatMap function declaration, the solution is to use onClick={showCheckboxes}. Note that even if showCheckboxes was declared inside BoatMap, you would not use the this keyword, since BoatMap is not a class.

answered Jan 23 '20 at 19:29

wizloc

2,202
4
28
54

score 0 · Answer 2 · answered Jan 23 '20 at 19:17

0

its been a minute since Ive worked in react but i think this may solve your issue

<div class="selectBox" onclick="() => showCheckboxes()">

answered Jan 23 '20 at 19:17

brooklynDadCore

1,309
8
13

Artem Matiushenko · Answer 3 · 2020-01-23T19:46:24.723

0

This code looks so weird, but if we are talking about react, there is no onclick, but onClick instead (in camelCase).

Plus what you r getting it's not an error, just warning, that you did not use a function, which u have. You pass to onClick handler just a string "onClick="showCheckboxes()", but you need to pass this function, so it will be like this onClick={showCheckboxes}

edited Jan 23 '20 at 19:46

answered Jan 23 '20 at 19:22

Artem Matiushenko

814
10
14

Sorry I misspelled, I corrected the question but it is not the error – Emanuele Jan 23 '20 at 19:24
1

what you r getting it's not an error, just warning, that you did not use a function, which u have. You pass to `onClick` handler just a string "onClick="showCheckboxes()", but you need to pass this function, so it will be like this `onClick={showCheckboxes}` – Artem Matiushenko Jan 23 '20 at 19:29
@ArtemMatiushenko I suggest to add your comment inside your answer, to make it more complete – Calvin Nunes Jan 23 '20 at 19:34

Function is declared but its value is never used

3 Answers3