How to display the component correctly?

Question

JavaScript

Good day!
I understand with ReactJS and make a small modest application. I read, albeit superficially, the theory and additional articles and decided to "improve" my web application - to make the components smaller, separating them into different files. And I came across such a problem that I don’t know how to correctly nest one component in another)
Site:

<div className="feed">
        <Article firstInfo = "Hello!"></Article>
        <Article firstInfo = "Bye."></Article>
      </div>

Article.js:

import React, { Component } from "react";
import Headlines from "./Headlines.js"

class Article extends Component {
  render() {
    return (
      <div className="article">

        <Headlines firstWord = "this.props.firstWord"
                   secndWord = "this.props.secndWord"/>

        <div className="horz-divider" />

        <div className="info-text">
          <div className="first-info">
            <p>{this.props.firstInfo}</p>
          </div>
        </div>
      </div>
    );
  }
}
export default Article;

headers.js:

import React, { Component } from "react";

/*class Headlines extends Component {
    render() {
        return(
        <div class="header-form">
            <a className="first-word">
                <p>{this.props.firstWord}</p>
            </a>

            <a className="second-word">
                <p>{this.props.secndWord}</p>
            </a>
        </div>
        );
    }
}*/

function Headlines(props) {
    return (
        <div class="header-form">
            <a className="first-word">
                <p>{this.props.firstWord}</p>
            </a>

            <a className="second-word">
                <p>{this.props.secndWord}</p>
            </a>
        </div>
    );
}

export default Headlines;

And after these machinations, I get a bunch of errors, the reason for which is this:

Answer 1

Will { props.firstword } work?