Q:

What does this error means? Render methods should be a pure function of props and state

I'm totally new in React and had stucked with this error.
Error occurs because of this method:
   deleteItem = (index) => {
    this.state.items.splice(index, 1),
    this.setState({
        items: this.state.items
    })
    }

I also using @babel/plugin-proposal-class-properties
If I change button onClick event to this:
     onClick={this.deleteItem.bind(index)}

it starts working perfectly and i dunno why.
Whole code example
import React from 'react';

export default class extends React.Component{
    constructor(props) {
    super(props)
    this.state = {
        items: [1, 2, 3, 4, 5]
    };
};
addItem = () => {
    this.state.items.push('added');
    this.setState({
        items: this.state.items
    });
}
deleteItem = (index) => {
    this.state.items.splice(index, 1),
    this.setState({
        items: this.state.items
    })
}
render(){
    const list = this.state.items.map((item, index) => {
        return <li key={index}>{item}
        <button onClick={this.deleteItem(index)}>Remove</button>
        </li>
    });
    return (
        <div>
            <ul>
                {list}
            </ul>
            <button onClick={this.addItem}>Add</button>
        </div>
    )
}
}

How can i fix this?

A:

As per the React docs:

Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

You are directly mutating the state, don't do it. Pass a new state object in the setState() method.
 deleteItem = (index) => {
    const newItems = this.state.items.filter((ele, idx) => idx != index),
    this.setState({
        items: newItems
    })
 }

Or you can use the Array.prototype.slice() function, which does not modify the original array as it takes a copy of it in the given range and returns it in a new array:
deleteItem = (index) => {
    const newItems = [...s.slice(0, index), ...s.slice(index + 1)],
    this.setState({
        items: newItems
    })
 }

Also the this context is not set in your onClick handler, use a arrow function () => to capture the lexical this:
onClick={() => this.deleteItem(index)}

That is necessary as this points to the current execution context, if you don't bind this to the lexical this and when the callback is invoked the this won't be referring to your component instance anymore. 
Also if you invoke deleteItem(index) immediately the handler will point to undefined instead of the deleteItem reference as the deleteItem(index) returns undefined.
You need to modify the addItem() method as well, where you should form a new array from the added element:
addItem = () => {
    this.setState({
        items: this.state.items.concat('added')
    });
}

