title: React.JS using a component
body: <p>So I am building a simple React application. It is my first time using it. So I have built this component:</p>
  
  <pre><code>import React, { Component } from "react";
  import { Link } from "react-router-dom";
  
  class FeatureBlock extends Component {
  constructor(props) {
      super(props);
  }
  render() {
     //code here  
     return (
     &lt;li className="work-list-item" id={this.props.id}&gt;
          &lt;Link to={this.props.src}&gt;
              &lt;div className="thumbnail-wrapper"&gt;
                  &lt;img width={this.props.width} height={this.props.height} src={this.props.src} alt={this.props.alt} /&gt;
              &lt;/div&gt;
              &lt;div className="work-info"&gt;
                  &lt;div className="work-content"&gt;
                      &lt;h2&gt;{this.props.title}&lt;/h2&gt;
                      &lt;div className="excerpt"&gt;{this.props.contentClass}&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/Link&gt;
      &lt;/li&gt;
      );
  }
  }
  export default FeatureBlock;
  </code></pre>
  
  <p>And I am importing this in my index.js file like this: </p>
  
  <pre><code>import React, { Component } from "react";
  import test from "./test";
  import { Link } from "react-router-dom";
  import FeatureBlock from "../FeatureBlocks/FeatureBlock";
  
  class testing extends Component {
  render() {
      return (
    &lt;div&gt;
      &lt;div className="component-container jobs-listing-component contact-page-component full-width-bg"&gt;
          &lt;test id="test-id" title="Test Title" titleDesc="" contentClass=""&gt;
            &lt;div className="work-archive-component"&gt;
              &lt;ul className="work-list"&gt;
                &lt;FeatureBlock title="Test Website" id="test-id"&gt;
  
                &lt;/FeatureBlock&gt;       
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/test&gt;
      &lt;/div&gt;
    &lt;/div&gt;
      );
  }
  }
  export default testing;
  </code></pre>
  
  <p>This in my brain seems like the correct logic that will work but it is not working. Like I said I am very new and I am just trying to get something simple to work and connect the dots here. Any and all help will be great! Just asking for learning experience. Thanks!  </p>
  
  <p>BTW 
  My folder structure is like this:  </p>
  
  <pre><code>src  
  --testing  
  ----index.js  
  ----test.js  
  --FeatureBlocks  
  ----FeatureBlock.js  
  </code></pre>
  
  <p>ERROR LIST: </p>
  
  <p><a href="https://i.stack.imgur.com/ryRKn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ryRKn.png" alt="enter image description here"></a></p>