jquery's map doesn't return native array, you need to use get()

slideHeights = $('*[data-anchor]').map(function(i, item) {
    return Math.floor($(item).offset().top);
}).get(); 

Or use toArray

slideHeights = $('*[data-anchor]').map(function(i, item) {
    return Math.floor($(item).offset().top);
}).toArray(); 

Array#unshift is an in-place function that mutates the array it's called upon. unshift returns the length of the updated array. The reason it fails after adding an item is because you've replaced what should be an array with a number. Number.map is not a thing so the program crashes.

The golden rule of React is "never mutate state" because it confuses React's diffing algorithm as it attempts to figure out what to rerender, with unpredictable results. Make a copy if you need to use a mutating function like unshift.

Try Array#concat instead of unshift here. concat is non-mutating and returns a copy of the array it's called on, so there will be no problems with React and it's safe to use inline directly in the object you're passing to setState.

A second problem is reading state values inside of the setState call, like this.state.todos.length. Use the callback version of setState that accepts the previous state as a parameter:

this.setState(prevState => ({
  todos: [{
    id: prevState.todos.length + 1,
    title: prevState.value,
    completed: true
  }].concat(prevState.todos)
}));

Spread syntax works in place of concat here. The code below also fixes a bug where this.props.map was used instead of this.state.map and doesn't use an <input> as a child element of a <ul>.

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: this.props.todos,
      value: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }

  addTodo(e) {
    e.preventDefault();
    this.setState(prevState => ({
      todos: [{
        id: prevState.todos.length + 1,
        title: prevState.value,
        completed: true
      }, ...prevState.todos]
    }));
  }

  handleChange(e) {
    this.setState({value: e.target.value});
  }

  render() {    
    return (
      <div>
        <h1>Todos:</h1>
        <form onSubmit={(e) => this.addTodo(e)}>
          <input type='text' 
                 value={this.state.value} 
                 onChange={this.handleChange} />
        </form>
        <ul className='todo-list'>
          { 
            this.state.todos.map(todo =>              
              <React.Fragment key={todo.id}>
                <li className={
                  `todo-item ${todo.completed 
                   ? 'todo-item-completed' 
                   : ''}`
                }>
                  { todo.title }
                  <input
                    readOnly
                    type='checkbox'
                    checked={todo.completed}
                  />
                </li>
              </React.Fragment>
            ) 
          }
        </ul>
      </div>
    )
  }
}

ReactDOM.createRoot(document.querySelector("#app"))
  .render(<TodoList todos={[]} />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>

Using function components and the state hook moves pieces of state into distinct variables, simplifying state management in most use cases.

As a side note, prevState.todos.length + 1 may be a poor way to generate ids if you introduce the option to delete todos. I could add a todo and make the length 1, add a second todo to make the length 2. Then, if I delete the first item with id 1 and create a new item, I have two items with id set to 2. A monotonically increasing number or UUID might be better.

You've added an element to "_array", and its index will be 0. However, you're trying to use an array as an index into an array, and that won't work. That is,

_array[u]

doesn't make sense. Arrays are indexed numerically. Thus the value of that expression is undefined, and that explains the error message — you're trying to reference the "unshift" property of the value undefined. (Well, undefined isn't really a value, but whatever.)

You need to call the function addFlavor as well:

let originalFlavors = [...];
function addFlavor(originalFlavors) {
  originalFlavors.unshift("Rainbow Sherbert");
}
addFlavor(originalFlavors);
console.log(originalFlavors);

Try

var arr = Array.prototype.slice.call(allMessages);
arr.unshift(data);

You can see how does Array.prototype.slice.call() work?

method 'unshift' does not return modified array. you can see how it works here.

and mutating state without setState method is not recommend because in that case React cannot detect the change.

you can use setTodos(arr => [newTodo, ...arr]) instead.