Javascript – Why does accessing a field in the object return undefined, but present when printing the object?

I have a list of survivors:

const survivorsList = [
  {
    id: 1,
    name: "Ace Visconti",
    image_path: "static/survivors/ace_visconti.jpg",
  },
  {
    id: 2,
    name: "Vittorio Toscano",
    image_path: "static/survivors/vittorio_toscano.jpg",
  },
  {
    id: 3,
    name: "Nancy Wheeler",
    image_path: "static/survivors/nancy_wheeler.jpg",
  },
  {
    id: 4,
    name: "Claudette Morel",
    image_path: "static/survivors/claudette_morel.jpg",
  },
];

I am trying to access the list in a render function, in my app:

  renderSurvivorName = () => {

    const randomSurvivor = this.state.survivorsList.filter(
        (survivor) => survivor.name === "Ace Visconti"
    );

    console.log("Random Survivor: " + JSON.stringify(randomSurvivor))
    console.log("Survivor Name: " + randomSurvivor.name);

    // return randomSurvivor['name'];
    return randomSurvivor.name;
  };

When I look at the console I see:

Random Survivor: [{"id":1,"name":"AceVisconti","image_path":"static/survivors/ace_visconti.jpg"}]. App.js:62
Survivor Name: undefined. App.js:63

The full code for the React app is simple, and here in case it matters:

import React, { Component } from "react";

const survivorsList = [
  {
    id: 1,
    name: "Ace Visconti",
    image_path: "static/survivors/ace_visconti.jpg",
  },
  {
    id: 2,
    name: "Vittorio Toscano",
    image_path: "static/survivors/vittorio_toscano.jpg",
  },
  {
    id: 3,
    name: "Nancy Wheeler",
    image_path: "static/survivors/nancy_wheeler.jpg",
  },
  {
    id: 4,
    name: "Claudette Morel",
    image_path: "static/survivors/claudette_morel.jpg",
  },
];

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      survivorsList: survivorsList,
      survivorName: "Ace Visconti"
    };
  }

  // displayRandom = (status) => {
  //   if (status) {
  //     return this.setState({ randomCalculated: true });
  //   }
  //
  //   return this.setState({ randomCalculated: false });
  // };

  renderSurvivorTitle = () => {
    return (
        <div className="nav nav-tabs">
        <span
            className={this.state.randomCalculated ? "nav-link active" : "nav-link"}
            onClick={() => this.displayRandom(true)}
        >
          Survivor
        </span>
        </div>
    );
  };

  renderSurvivorName = () => {

    const randomSurvivor = this.state.survivorsList.filter(
        (survivor) => survivor.name === "Ace Visconti"
    );

    console.log("Random Survivor: " + JSON.stringify(randomSurvivor))
    console.log("Survivor Name: " + randomSurvivor.name);

    // return randomSurvivor['name'];
    return <div>Survivor: {this.state.survivorName}</div>;
  };

  render() {
    return (
        <main className="container">
          <h1 className="text-white text-uppercase text-center my-4">Todo app</h1>
          <div className="row">
            <div className="col-md-6 col-sm-10 mx-auto p-0">
              <div className="card p-3">
                <div className="mb-4">
                  <button
                      className="btn btn-primary"
                  >
                    Select Random Survivor
                  </button>
                </div>
                <div>{this.renderSurvivorTitle()}</div>
                <div>{this.renderSurvivorName()}</div>
                {/*<div>{"Ace Visconti"}</div>*/}
              </div>
            </div>
          </div>
        </main>
    );
  }
}

export default App;

I am using the latest react as you can see from my package.json:

{
  "name": "dbd-randomizer-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "latest",
    "@testing-library/react": "latest",
    "@testing-library/user-event": "latest",
    "react": "latest",
    "react-dom": "latest",
    "react-scripts": "latest",
    "web-vitals": "latest",
    "bootstrap": "latest",
    "reactstrap": "latest"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

As you can see I tried accessing the field both with dot notation and [] notation. I can’t see how the field would not be set. Is it possible the scope changes between these two calls? Is it reloading the page between calls and the value isn’t set?

I found this stackoverlow article. but since I am not yet making an api call, I don’t think I should need async. Am I wrong?