Reactjs error: 'render' is not defined no-undef

Question

I'm new to reactjs and I have this problem in my function component Square, which is the child of the Board class component Board. This is from the official reactjs tutorial on getting started. When I run my code, I get this error: 'render' is not defined no-undef

The parent component can pass the state back down to the children by using props This keeps the child components in sync with each other and with the parent component When the Board’s state changes, the Square components re-render automatically (e.g handleClick)

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

// function component
function Square(props) {
    render (
        <button className="square" onClick={props.onClick}>
            {props.value}
        </button>
    );
}

class Board extends React.Component {
    // Constructor to keep track of Board's state
    // The parent component can pass the state back down to the children by using props
    // This keeps the child components in sync with each other and with the parent component
    // When the Board’s state changes, the Square components re-render automatically (e.g handleClick)
    constructor(props) {
        super(props);
        this.state = {
          squares: Array(9).fill(null),
          xIsNext: true,
        };
    }

    handleClick(i) {
        const squares = this.state.squares.slice(); // Create copy of squares array with slice
        squares[i] = this.state.xIsNext ? 'X' : 'O';
        this.setState({
            squares: squares,
            xIsNext: !this.state.xIsNext,
        });
    }

    renderSquare(i) {
        return (<Square value={this.state.squares[i]}
                        onClick={() => this.handleClick(i)} />);
    }

    render() {
        const status = 'Next player: X';

        return (
            <div>
                <div className="status">{status}</div>
                <div className="board-row">
                    {this.renderSquare(0)}
                    {this.renderSquare(1)}
                    {this.renderSquare(2)}
                </div>
                <div className="board-row">
                    {this.renderSquare(3)}
                    {this.renderSquare(4)}
                    {this.renderSquare(5)}
                </div>
                <div className="board-row">
                    {this.renderSquare(6)}
                    {this.renderSquare(7)}
                    {this.renderSquare(8)}
                </div>
            </div>
        );
    }
}

class Game extends React.Component {
    render() {
        return (
            <div className="game">
                <div className="game-board">
                    <Board />
                </div>
                <div className="game-info">
                    <div>{/* status */}</div>
                    <ol>{/* TODO */}</ol>
                </div>
            </div>
        );
    }
}

// ========================================

ReactDOM.render(
    <Game />,
    document.getElementById('root')
);

Ross Allen Ross Allen · Accepted Answer · 2020-08-17T03:01:43

// function component
function Square(props) {
    // Change from "render" to "return" in the function component
    // render (
    return (
        <button className="square" onClick={props.onClick}>
            {props.value}
        </button>
    );
}

Reactjs error: 'render' is not defined no-undef

1 Answers