PURPOSE

Storing Tips here for future reference

Returning Multiple Rows in same Function without warning or error

When we have to render multiple trs inside of a function and we try something like

getRows = (row) => { return ( <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> ) }

React will throw error about JSX expressions having one parent element

If we wrap it inside a div

getRows = (row) => { return ( <div> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </div> ) }

We get a warning about how divs cannot be children of table elements

The correct way to do this would be using Fragments, which was introduced in React 16

getRows = (row) => { return ( <React.Fragment> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </React.Fragment> ) }

Note that there might be a warning about each element having a unique key prop Just add the key attribute in all your components don't currently have one, including the Fragment.

---

React not identifying function as React Component

If you see an error such as:

React Hook “useState” is called in function “app” which is neither a React function component or a custom React Hook function

All you need to do this, capitalize the first letter of your component due to react conventions.

So this:

import React, { useState } from "react" import "./App.css" import Person from "./Person/Person" const app = props => { const [personState, setPersonSate] = useState({ person: [ { name: "bishnu", age: "32" }, { name: "rasmi", age: "27" }, { name: "fretbox", age: "4" }, ], }) return ( <div className="App"> <h2>This is react</h2> <Person name={personState.person[1].name} age="27"></Person> <Person name={personState.person[2].name} age="4"></Person> </div> ) } export default app

becomes this:

import React, { useState } from "react" import "./App.css" import Person from "./Person/Person" const App = props => { const [personState, setPersonSate] = useState({ person: [ { name: "bishnu", age: "32" }, { name: "rasmi", age: "27" }, { name: "fretbox", age: "4" }, ], }) return ( <div className="App"> <h2>This is react</h2> <Person name={personState.person[1].name} age="27"></Person> <Person name={personState.person[2].name} age="4"></Person> </div> ) } export default App

---

Adding multiple classNames to an element

The simplest approach is to use concatenation:

import style from '/css/style.css'; <div className={style.style1+ ' ' + style.style2} />