how do you use a router dom to read a property of a undefined property?

In your routes, you’re declaring that the component to be rendered at route “/” is the Headline component, but you’re not passing it any props. This means that whenever you visit the home page, the Headline component is likely trying to access unassigned properties.

From your question, I assume that you already have the Headline component being rendered in your <App /> component, and in this file, it is actually being passed the necessary props. If its already being rendered there, you don’t need to use the <Route /> outside of the <App />. It’s not clear the functionality you’re looking for or how you’ve written your <App /> component, but I think what you should keep in mind is that the syntax you’re using doesn’t pass any props to <Headline /> from the route. If you actually want to pass those props, change

<Route path="/" component={Headline}></Route>

to

<Route path="/">
  <Headline
    userInput={this.state.userInput}
    money={this.state.money}
    displayFakeNews={this.state.displayFakeNews}
    onPublish={this.handlePublish}
  />
</Route>

Passing the component to be rendered as a child of the route, so that you can actually pass it props.

Consult the React Router documentation for more information on how to use the <Route /> component.