Frontend page doesn't display unless i comment out my table making code-CodePudding

Here is my code. I used typescript and my database is in a .json file. My page displays fine when I don't try to display the table and disappears completely

import React, { useState } from "react";
import "./viewAvailableShifts.css";
import "bootstrap/dist/css/bootstrap.min.css";
import MockData from "./data.json";

export class ViewAvailableShifts extends React.Component {
    render() {
        const [data] = useState(MockData);

        return (
            <>
                <div className="row">
                    <div className="leftcolumn">
                        <div className="center">
                            <h1>Available Shifts</h1>
                            <div>
                                <table>
                                    <thead>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                    </thead>
                                    <tbody>
                                        {data.map((d) => (
                                            <tr key={d.id}>
                                                <td>{d.first_name}</td>
                                                <td>{d.last_name}</td>
                                                <td>{d.email}</td>
                                                <td>{d.gender}</td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>

CodePudding user response：

Hooks doesn't work inside class component

import React, { useState } from "react";
import "./viewAvailableShifts.css";
import "bootstrap/dist/css/bootstrap.min.css";
import MockData from "./data.json";

export const ViewAvailableShifts = () => {
        const [data] = useState(MockData);

        return (
            <>
                <div className="row">
                    <div className="leftcolumn">
                        <div className="center">
                            <h1>Available Shifts</h1>
                            <div>
                                <table>
                                    <thead>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                    </thead>
                                    <tbody>
                                        {data.map((d) => (
                                            <tr key={d.id}>
                                                <td>{d.first_name}</td>
                                                <td>{d.last_name}</td>
                                                <td>{d.email}</td>
                                                <td>{d.gender}</td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>

CodePudding user response：

Have you tried mapping the table rows outside of the return? Also wondering why data was in square brackets? Maybe curley braces or none at all, depending on how you return it from state? so if it's already an array just data if you need to make it an array maybe spread [...data]?


export class ViewAvailableShifts extends React.Component {
    render() {
        const data = useState(MockData);

        const rows = {data.map((d) => (
                                            <tr key={d.id}>
                                                <td>{d.first_name}</td>
                                                <td>{d.last_name}</td>
                                                <td>{d.email}</td>
                                                <td>{d.gender}</td>
                                            </tr>
                                        ))}

        return (
            <>
                <div className="row">
                    <div className="leftcolumn">
                        <div className="center">
                            <h1>Available Shifts</h1>
                            <div>
                                <table>
                                    <thead>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                    </thead>
                                    <tbody>
                                        {rows}
                                    </tbody>
                                </table>
                            </div>

CodePudding user response：

What are you trying to accomplish with useState? useState is a hook that listens for changes to data and then changes the UI accordingly. Use state returns two values though, it would be used like this...

const [data, setData]= useState(someDataOrEmptyValueButNeverActuallyEmpty)

onSomeEvent((eventOrDataOrWhatNot) => setData(eventOrDataOrWhatNot))

and then whatever in your UI that was depending on data will adjust to the new values.

CodePudding user response：

So, are you ready?
You can't us hooks in class components

export const ViewAvailableShifts = () => {
        const [data] = useState(MockData);
‏}

Should be

export default class ViewAvailableShifts extends Component {
   constructor() {
   super();
   this.state: {data: MockData}
   }
render(){...}
}