ch-greams / invoice-manager Goto Github PK

This code:

[ "1", "2", "3" ].map((element: string) => {
    return (
        <div key={element}>
            {element}
        </div>
    );
})

Will produce following html:

<div>1</div>
<div>2</div>
<div>3</div>

Use this idea and concepts from the things that we did during the call, to optimize consultantElement and tableElement in src/client/index.tsx.

Requirements:

• Create 3 .tsx files with code that will produce following components:
  • <App /> in src/client/App.tsx
  • <ConsultantBlock name={"..."} phone={"..."} email={"..."} addressFirst={"..."} addressSecond={"..."} /> in src/client/ConsultantBlock.tsx
  • <Timesheet dayEntries={[ ... ]} /> in src/client/Timesheet.tsx
• ReactDOM.render(<App />, document.getElementById("content")); plus couple of imports should be basically the only thing in src/client/index.tsx

There should be enough information about components on this page only:
https://reactjs.org/docs/components-and-props.html

You can use class like below, for components, or function like in some of the examples in the link above. Currently there's no difference.

interface Props {
    name: string;
}

class ShoppingList extends React.Component<Props> {

    public render(): JSX.Element {

        return (
            <div className={"shoppingList"}>
                <h1>{`Shopping List for ${this.props.name}`}</h1>
                <ul>
                    <li>{"Instagram"}</li>
                    <li>{"WhatsApp"}</li>
                    <li>{"Oculus"}</li>
                </ul>
            </div>
        );
    }
}

// Example usage: <ShoppingList name={"Mark"} />

Information about import/export for modules in typescript:
https://www.typescriptlang.org/docs/handbook/modules.html

• Replace following tags <table>, <tr>, <th>, and <td>. Use <div> instead.
• Replace display: table; and display: table-row; with flexbox css.

Some info that should help: https://css-tricks.com/snippets/css/a-guide-to-flexbox/