Reactjs: Nothing was returned from render

This is a very self-explanatory issue that we face in react-based applications. We got into this issue for the following component:

const OrderDetails = (props) => {
    <section class="section">
        <div className="hero-body">
           <h3>Order details</h3>
        </div>
    </section>
};
export default OrderDetails;

We had to change the above code to replace the {} with () in order to return.

const OrderDetails = (props) => (
    <section class="section">
        <div className="hero-body">
           <h3>Order details</h3>
        </div>
    </section>
);
export default OrderDetails;