Questions

Should Root take props or wrap children components?

<Root navLinks={this.state.navLinks}></Root>

vs

<Root>
  <NavLinks navLinks={this.state.navLinks} />
</Root>

I think this primarily comes down to the purpose of Root. If it is a general purpose wrapper container component, then the latter pattern makes sense. I.E. it is providing the layout but no actual UI, this works well. If on the other hand it isn't very generalizable, i.e. it is more single purpose, then passing it props is preferred. I understand this doesn't sound like an answer, but like many things in javascript, there's no clear, hard line between them and this could also simply come down to personal preference/opinion.

Do I need an App.js file or index.js file and could have one rather than the other?

Again, these both exist by convention, but you could easily merge the two if you so desired. The distinction basically comes down to separation of concerns. index.js is primarily concerned with rendering the application into the DOM whereas App.js is primarily concerned with being the root application container. This is typically where redux stores & providers, react contexts & providers (well, all "providers" in general), root routers/navigation, theming, etc, etc... would/could reside and provide functionality to the app.

Code Review

App.js

• For such simple components (no state updates or no state, no lifecycle functions, etc..) it is recommended to instead use functional components
• There is no compelling reason to store the static link data in react state, just pass it directly to props
• navLinks isn't a component so it probably shouldn't be stored in that directory, better suited for a utility directory or similar
• Root doesn't wrap any children components so it can be self-closed

Suggestion

import React from "react";
import { navLinks } from "./components/nav-links";
import Root from "./components/Root";

export const App = () => <Root navLinks={navLinks} />;

/components/Root.js

• Many of the same comments as for App.js
• If the element ids are actually used (CSS, testing) then keep them, otherwise they just clutter the JSX
• BodyCode is already wrapped in a div, so the div here is extraneous and helps increase clutter in the DOM

Suggestion

import React from "react";
import NavMenu from "./nav-menu";
import BodyCode from "./body-code";

export const Root = ({ navLinks }) => (
  <div>
    <div>
      <NavMenu navLinks={navLinks} />
    </div>
    <BodyCode />
  </div>
);

/components/body-code.js

• By convention react component names are PascalCased
• handleClick can be defined as an arrow function, which would make binding this to it in the constructor unnecessary
• Great job on using a functional state update to toggle the isToggleOn state value
• While not a necessity, the constructor can be removed and state defined as a class property
• Also not a necessity, this component is still simple enough and doesn't utilize any lifecycle functions that it is also a good candidate for conversion to functional component

Class-based suggestion

import React, { Component } from "react";

export class BodyCode extends Component {
  state = {
    isToggleOn: true,
  };

  handleClick = () => this.setState(
    prevState => ({ isToggleOn: !prevState.isToggleOn })
  );

  render() {
    return (
      <div>
        <p>some body text</p>
        <button onClick={this.handleClick}>
          {this.state.isToggleOn ? 'ON' : 'OFF'}
        </button>
      </div>
    )
  }
}

Functional component suggestion

import React, { useState } from "react";

export const BodyCode = () => {
  const [isToggleOn, setIsToggleOn] = useState(true);

  const handleClick = () => setIsToggleOn(on => !on);

  return (
    <div>
      <p>some body text</p>
      <button onClick={handleClick}>
        {isToggleOn ? 'ON' : 'OFF'}
      </button>
    </div>
  );
};

/components/nav-menu.js

• Should follow react component naming convention
• Simple and should probably be converted to functional component

Suggestion

import React from "react";

export const NavBar = ({ navLinks }) => navLinks.map(link => (
  <a key={link.href} href={link.href}>
    {link.name}
  </a>
));

Other Suggestions

Use a routing/navigation solution versus using anchor (<a />) tags as these actually reload the app. These typically provide all the functionality of links and navigating around your app by manipulating the browser's history stack but won't reload the page between navigations.

react-router/react-router-dom is a common routing solution. The idea being you define Routes, wrapped in a Router/Switch, to render each "page" of your app, and instead of anchor tags a Link is used to go to a specified path.

A sample router in BodyCode

import { BrowserRouter as Router, Route } from 'react-router-dom';

...

<div>
  <p>some body text</p>
  <button onClick={this.handleClick}>
    {isToggleOn ? 'ON' : 'OFF'}
  </button>
  <Router>
    <Route path="/subs" component={Subs} />
    <Route path="/" component={Home} />
  </Router>
</div>

NavMenu

import { Link } from 'react-router-dom';

...

navLinks.map(link => (
  <Link key={link.href} to={link.href}>
    {link.name}
  </Link>
))