Trouble with functional creation and rendering of div in sub of a sub

I'm sure im missing some key element of understanding because this file gets exported and used in another file and then that is exported to another file and then that last file in the chain is what is sent to react.DOM. but why can't I make my components in a function in this file and have them be rendered. I'm not understanding something about the chain and how many exported files you can have and how i guess nested they can be.... help please. Cause if I do this at the surface level of the file chain it works fine but not this far down...

import React, { Component } from 'react';

import './Css_files/OfficeComponent.css';

class OfficeComponent extends Component {

  pic_span_nurse(props){
      return(
          <div className="row box_infoz">
            <div className="col-xs-3">
              <h1>picture</h1>
            </div>
            <div className="col-xs-9">
              <h5>So this has noew changed to the office part where we have staff in this box and directions on the bottom</h5>
            </div>
          </div>
        );
    }

  render() {
    return (
        <div>
          <pic_span_nurse/>
        </div>
    );
  }
}

export default OfficeComponent;