mardi 7 mai 2019

How to create checkbox in A React Function

I am trying to create a Checkbox to display and hide my React Table with some data in it. I have only used classes and am new to using Functions and as a result am struggling to implement a way to create a checkbox that can hide my React Table or a column.

import "react-table/react-table.css";
import React, { Component, useState, useEffect } from "react";

function dataquery() {
  return fetch("www.website.com").then(response =>
    response.json()
  );
}

function Offence() {
  const [count, setCount] = useState([]);
  useEffect(() => {
    dataquery().then(headlines => {
      setCount(headlines);
    });
  }, []);
  //event.preventDefault();
  console.log(count.offences);

  let data = [{}];
  if (typeof count.offences !== "undefined" ) {
    let newdata = count.offences.map(count => data.push({ name: count }));
//    console.log("???");
  }
  console.log(typeof count.offence);
  const columns = [
    {
      Header: "Name",
      accessor: "name",

    },

  ];

// trying to hide this react table or just hide the column
  return <ReactTable data={data} columns={columns} filterable />;

}
export default Offence;

I am exporting this function into another file in which I render 'Offence'. The fetch website is not the actual website as it needs a private login to work, so I replaced it with this placeholder for the purpose of this.

Thank you.




Aucun commentaire:

Enregistrer un commentaire