How do I display my returned props values that is stored locally?

Question

I want to be able to display the dog's profile information (props-values) when I press on the dogs name. But I keep getting this error:

caught Error: StartPage(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

//(profile.js)
import React from "react";

export class ViewProfile extends React.Component {

    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div>
                <p>Name: {this.props.dog.name}</p>
                <p>Nick: @{this.props.dog.nick}</p>
                <p>Age: {this.props.dog.age}</p>
                <p>Bio: {this.props.dog.bio}</p>
                <p>Friends</p>
                {this.props.dog.friends.length > 0 && this.props.dog.friends.map(friend => <div><span key={friend}>{friend}</span> <span onClick={() => this.props.switchDogs(friend)}>X</span></div>)}
                <a href="" onClick={(e) => this.props.goBack(e)}>Go back</a>
            </div>
        )
    }
}

//(start.js)
import React from "react";
import { CreateProfile } from './create';
import { ViewProfile } from './profile';

export class StartPage extends React.Component {

    state = { currentPage: "start", selectedDog: "", dogs: [] }

    componentDidMount() {
        var allDogs = JSON.parse(localStorage.getItem('dogs'));
        if (allDogs) {
            this.setState({
                dogs: allDogs
            });
        }
    }
    switchDogs(dog) {
        this.setState(prevState => ({ ...prevState, currentPage: "selectedProfile", selectedDog: dog }))
    }

    switchPath(event) {
        event.preventDefault()
        this.setState({ currentPage: "create" })
    }

    getStartPage = () => {
        return <div>
            <h4>Dogbook</h4>
            <br />
            <br />
            <h3>Users</h3>
            {this.state.dogs && this.state.dogs.map(dog => <span className="dog-list" onClick={() => this.switchDogs(dog)}>@{dog.name}</span>)}
            <br />
            <a href="" onClick={(e) => this.switchPath(e)}> Create new dog </a>
        </div>
    }

    getPage() {
        switch (this.state.currentPage) {
            case "start": return this.getStartPage()
            case "create": return <CreateProfile goBack={() => this.switchPath} />
            case "selectProfile": return <ViewProfile dog={this.state.selectedDog} goBack={() => this.switchPath} goToDog={() => this.switchDogs} />
            default: this.getStartPage()
        }
    }

    render() {
        return this.getPage()
    }

}

Answer 1

As I see it, you have 2 problems in your code:

1. It looks like your default case on the getPage() function, doesn't actually return anything.
2. Clicking on the dog's name forward you to the selectedProfile page and your switch is returning your ViewProfile component when currentPage is selectProfile , you would like to change both options to the same one.

Your fixed code would be:

(profile.js)

import React from "react";

export class ViewProfile extends React.Component {
  constructor(props) {
      super(props)
  }

  render() {
      return (
          <div>
              <p>Name: {this.props.dog.name}</p>
              <p>Nick: @{this.props.dog.nick}</p>
              <p>Age: {this.props.dog.age}</p>
              <p>Bio: {this.props.dog.bio}</p>
              <p>Friends</p>
              {this.props.dog.friends.length > 0 && this.props.dog.friends.map(friend => <div><span key={friend}>{friend}</span> <span onClick={() => this.props.switchDogs(friend)}>X</span></div>)}
              <a href="" onClick={(e) => this.props.goBack(e)}>Go back</a>
          </div>
      )
  }
}

(start.js)

import React from "react";
import { CreateProfile } from './create';
import { ViewProfile } from './profile';

export class StartPage extends React.Component {

  state = { currentPage: "start", selectedDog: "", dogs: [] }

  componentDidMount() {
      var allDogs = JSON.parse(localStorage.getItem('dogs'));
      if (allDogs) {
          this.setState({
              dogs: allDogs
          });
      }
  }
  switchDogs(dog) {
      this.setState(prevState => ({ ...prevState, currentPage: "selectedProfile", selectedDog: dog }))
  }

  switchPath(event) {
      event.preventDefault()
      this.setState({ currentPage: "create" })
  }

  getStartPage = () => {
      return <div>
          <h4>Dogbook</h4>
          <br />
          <br />
          <h3>Users</h3>
          {this.state.dogs && this.state.dogs.map(dog => <span className="dog-list" onClick={() => this.switchDogs(dog)}>@{dog.name}</span>)}
          <br />
          <a href="" onClick={(e) => this.switchPath(e)}> Create new dog </a>
      </div>
  }

  getPage() {
      switch (this.state.currentPage) {
          case "start": return this.getStartPage()
          case "create": return <CreateProfile goBack={() => this.switchPath} />
          case "selectedProfile": return <ViewProfile dog={this.state.selectedDog} goBack={() => this.switchPath} goToDog={() => this.switchDogs} />
          default: return this.getStartPage()
      }
  }

  render() {
      return this.getPage()
  }
}

Answer 2

didn't look at much but check your getPage() function. I think your default case should have a return keyword

getPage() {
    switch (this.state.currentPage) {
        case "start": return this.getStartPage()
        case "create": return <CreateProfile goBack={() => this.switchPath} />
        case "selectProfile": return <ViewProfile dog={this.state.selectedDog} goBack={() => this.switchPath} goToDog={() => this.switchDogs} />
        default: this.getStartPage()
    }
}