Hiding a HTML element nested in a React component

Question

I have a table which is displayed as result from an API call to my backend from the front end via a form. The problem is the header is getting generated for each row of data, thus creating a redundancy.

I looked into refs as a way to access HTML elements.

    var BountyHunters = React.createClass({
       state : {toggleClass: true},
        getInitialState: function(){
          return({
            bountyHunters: []
          })
        },
        render: function () {
        var bountyHunters = this.state.bountyHunters
            bountyHunters = bountyHunters.map(function(bountyHunter, index){
             return (

              <tbody key={index}>
                <tr>
                  <td><span className={bountyHunter.obj.available}></span></td>
                  <td className="name">{bountyHunter.obj.name}</td>
                  <td className="rank">{bountyHunter.obj.rank}</td>
                  <td className="dist">{Math.floor(bountyHunter.dis /  1000)} km</td>
                </tr>
              </tbody>
             )
           })
            return(
              <div className="container">
                <div className="sixteen columns">
                  <div id="bountyhunter-container">
                    <form id="search" onSubmit= {this.handleSubmit}>
                      <label>Enter your latitude</label>
                      <input type="text" ref="lat" placeholder="latitude" requried/>
                      <label>Enter your longitude</label>
                      <input type="text" ref="lng" placeholder="longitude" requried/>
                      <input type="submit" className="button-primary" value="Find Bounty Hunters"/>
                    </form>
                    <table className="u-full-width">
                    <thead ref="thead">
                        <tr>
                          <th>Availability</th>
                          <th>Name</th>
                          <th>Bounties Claimed</th>
                          <th>Distance from you</th>
                        </tr>
                      </thead>
                      {bountyHunters}
                    </table>
                  </div>
                </div>
              </div>

            );
        },
        handleSubmit: function(e){
          e.preventDefault();
          var lng = this.refs.lng.value;
          var lat = this.refs.lat.value;
          this.refs.thead.style = 'block';

          fetch('/api/bountyHunters?lng=' + lng + '&lat=' + lat)
            .then(function(data){
              return data.json()
            }).then(json => {
              this.setState({
                 bountyHunters: json
              })
              console.log(json);
            });
        }
    });

    ReactDOM.render(<BountyHunters/>, document.getElementById('bountyHunters'))

So you can see I created or used a ref attribute in the <thead> tag and then used it in the handleSubmit function

this.refs.thead.style.display = 'block';

I believe though this is having the effect of ripping all the other properties on the thead element and replacing them with just the display: block property and value.

So my question is this: Is this the way you would go about doing this with refs? I looked into many add/remove class methods specifically with react, as I know they're many DOM mounting lifecycle concerns one has to make. But was kinda surprised at all the hoops one would have to go through. Can someone guide me as what is the best/React—ish way to do this?

Thanks in advance]1

UPDATE I actually posted the code with my attempt to hide then show the display property of the thead tag. The behavior I described was if the thead was returned in the render method.