JavaScript(ReactJS) 1) console.log in classes and 2) function called through another function

Question

I have these two questions concerning JS. I must say I've really done my research but couldn't find anything about them.
The questions are:

1. Why can't console.log and variable identifiers(var, let, const) be used inside a class, outside of functions/methods?
   E.g.(pseudo code):

class App extends Component {
    console.log(this) <--* ['Unexpected keyword or identifier']
    let a = 1         <--* ['Unexpected token']
    state = {         <--* [variable without identifier is alright]
        characters: [
            {
                name: 'Charlie',
                job: 'Janitor'
            }, etc...
            
    }

    removeCharacter = (index) => {
        console.log(this)  <--* [works here normally]

        const characters = this.state.characters

        etc...
            })
        })
    ...
}

2. Why does a function needs another function to be called? I mean, in what situations does it become necessary? This comes from something like:

const TableBody = (props) => {
    const rows = props.characterData.map((row, index) => {
        return (
            <tr key={index}>
                <td>{row.name}</td>
                <td>{row.job}</td>
 [this] *-->    <button onClick={() => props.removeCharacter(index)}>Delete</button>
            </tr>
        )
 [instead of something like] *--> <button onClick={props.removeCharacter(index)}>Delete</button>

I mean, props.removeCharacter(index) is itself a call already, isn't it?

Thank you!