syntax error - ReactJS instance.render is not a function

Question

I'm try to learn ReactJS and following this guide: https://www.taniarascia.com/getting-started-with-react/ but I have problems with the STATE section and I can't go on.

in App.js I wrote:

import React, {Component} from 'react'
import Table from './table'

class App extends Component {
  state = {
    characters: [
      {
        name: 'Charlie',
        job: 'Janitor',
      },
      {
        name: 'Mac',
        job: 'Bouncer',
      },
      {
        name: 'Dee',
        job: 'Aspring actress',
      },
      {
        name: 'Dennis',
        job: 'Bartender',
      },
    ],
  }
  removeCharacter = (index) => {
    const {characters} = this.state
  
    this.setState({
      characters: characters.filter((character, i) => {
        return i !== index
      }),
      render() {
        const { characters } = this.state
      
        return (
          <div className="container">
            <Table characterData={characters} removeCharacter={this.removeCharacter} />
          </div>
        )
      }
    })
    
  }
}
export default App

AND IN TABLE.JS

import React from 'react'

const TableHeader = () => {
    return (
      <thead>
        <tr>
          <th>Name</th>
          <th>Job</th>
        </tr>
      </thead>
    )
  }

  const TableBody = (props) => {
    const rows = props.characterData.map((row, index) => {
        console.log(index);
      return (
        <tr key={index}>
          <td>{row.name}</td>
          <td>{row.job}</td>
          <td>
                <button onClick={() => props.removeCharacter(index)}>Delete</button>
          </td>
        </tr>
      )
    })
    return <tbody>{rows}</tbody>
  }

  class Table extends Component {
      render() {
    //       const {characterData} = this.props
          
    //       return (
    //           <table>
    //       <TableHeader />
    //       <TableBody characterData={characterData} />
    //     </table>
    //   )
    const Table = (props) => {
      const {characterData, removeCharacter} = props
    
      return (
        <table>
          <TableHeader />
          <TableBody characterData={characterData} removeCharacter={removeCharacter} />
        </table>
      )
    }
    }
  

  export default Table

so the result is that: TypeError: instance.render is not a function Thanks in advance to who will answer me

question from:https://stackoverflow.com/questions/65843388/reactjs-instance-render-is-not-a-function

Answer 1

Refactored Working Code

App.js

import React, { Component } from "react";
import Table from "./Table";

class App extends Component {
  state = {
    characters: [
      {
        name: "Charlie",
        job: "Janitor",
      },
      {
        name: "Mac",
        job: "Bouncer",
      },
      {
        name: "Dee",
        job: "Aspring actress",
      },
      {
        name: "Dennis",
        job: "Bartender",
      },
    ],
  };
  removeCharacter = (index) => {
    const { characters } = this.state;

    this.setState({
      characters: characters.filter((character, i) => {
        return i !== index;
      }),
    });
  };

  render() {
    const { characters } = this.state;

    return (
      <div className="container">
        <Table
          characterData={characters}
          removeCharacter={this.removeCharacter}
        />
      </div>
    );
  }
}
export default App;

Table.js

import React from "react";

const TableHeader = () => {
  return (
    <thead>
      <tr>
        <th>Name</th>
        <th>Job</th>
      </tr>
    </thead>
  );
};

const TableBody = (props) => {
  const rows = props.characterData.map((row, index) => {
    console.log(index);
    return (
      <tr key={index}>
        <td>{row.name}</td>
        <td>{row.job}</td>
        <td>
          <button onClick={() => props.removeCharacter(index)}>Delete</button>
        </td>
      </tr>
    );
  });
  return <tbody>{rows}</tbody>;
};
class Table extends React.Component {
  render() {
    const Table = () => {
      const { characterData, removeCharacter } = this.props;

      return (
        <table>
          <TableHeader />
          <TableBody
            characterData={characterData}
            removeCharacter={removeCharacter}
          />
        </table>
      );
    };
    return (
      <div>
        <Table />
      </div>
    );
  }
}

export default Table;