Finance App

Inside StockInput

• state/load
• async/await loader method - this is a Promise. It is bound to load property.
• render - TickerInput with onSearch and state parameters passed in

Inside TickerInput

• Build out the render function - html, button click handle, DisplayData section
• Handle submit - get the user input (ticker) and call the onSearch function passed in as a property
• What do we want to display?

Inside LoadData

• Create the loadDividends function
• encode the query param
• create the url
• Fetch/.then chaining
• export default loadDividends

Create the grid

Step 1: Research

Identify what you want, think about known libraries that meet your needs.

I get different results if I search React Bootstrap Grid vs. React Bootstrap Table.

Find an interesting solution, try it out.

Installing bootstrap react-bootstrap-table-next

Documentation

• npm install react-bootstrap-table-next --save
• import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
• Include bootstrap 4 in index.html?

Create the table

• Set products and Columns
• Create the render function
• export default

Use the table

In TickerInput, import DividendData and add it to DisplayData class.