Using Logical && operator
const MenuItem = ({ children }) => {
return (
<li className={`menu-item ${isActive && 'menu-item-active'}`}>
{children}
</li>
);
};
Using Ternary operator
const MenuItem = ({ children }) => {
return (
<li className={`menu-item ${isActive ? 'menu-item-active' : ''}`}>
{children}
</li>
);
};
References
https://dev.to/victorocna/better-conditional-css-classes-in-react-2p8h
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children} </div>
);
}
This lets other components pass arbitrary children to them by nesting the JSX:
function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title"> Welcome </h1> <p className="Dialog-message"> Thank you for visiting our spacecraft! </p> </FancyBorder>
);
}
References
https://reactjs.org/docs/composition-vs-inheritance.html
https://reactjs.org/docs/react-api.html#reactchildren
Strict mode checks are run in development mode only; they do not impact the production build.
import React from 'react';
function ExampleApplication() {
return (
<div>
<Header />
<React.StrictMode> <div>
<ComponentOne />
<ComponentTwo />
</div>
</React.StrictMode> <Footer />
</div>
);
}
References
https://reactjs.org/docs/strict-mode.html
useState is a Hook that allows you to have state variables in functional components. You pass the initial state to this function and it returns a variable with the current state value (not necessarily the initial state) and another function to update this value.
useState() should only be used inside a functional component.
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Equivalent Class Example
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
References
https://reactjs.org/docs/hooks-state.html
Greeting.tsx
function Greeting(props:GreetingProps) {
return (
<p className="px-1 py-4 font-bold text-red-700">Hello {props.name}</p>
);
}
export interface GreetingProps {
name:string
}
export default Greeting;
App.tsx
import React from 'react';
import Greeting from "./components/Greeting";
function App() {
return (
<Greeting name={"Mahmood"}></Greeting>
);
}
export default App;
References
https://reactjs.org/docs/components-and-props.html
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />;}
Inside return
function List() {
const people = [
{id: 1, name: "Mahmood", isAdmin: true},
{id: 2, name: "Ali", isAdmin: false},
{id: 3, name: "Javad", isAdmin: false}
];
return (
<ul>
{people.map((value, index) => (
value.isAdmin?(<li key={value.id}>{value.name}</li>):null
))}
</ul>
);
}
export default List;
Preventing Component from Rendering
function WarningBanner(props) {
if (!props.warn) { return null; }
return (
<div className="warning">
Warning!
</div>
);
}
References
https://reactjs.org/docs/conditional-rendering.html
function List() {
const people = [
{id: 1, name: "Mahmood"},
{id: 2, name: "Ali"},
{id: 3, name: "Javad"}
];
return (
<ul>
{people.map((value, index) => (
<li key={value.id}>{value.name}</li>
))}
</ul>
);
}
export default List;
Keys help React identify which items have changed, are added, or are removed. The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys.
When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort.
References
https://reactjs.org/docs/lists-and-keys.html
App.tsx
import * as React from 'react'
import {Home} from "./components/Home";
export interface AppProps { compiler: string; framework: string; }
class App extends React.Component<AppProps,undefined> {
onGreeting()
{
alert("Hello World");
}
render() {
return (
<div>
<Home greet={this.onGreeting}/>
</div>
);
}
}
export default App;
components/Home.tsx
import * as React from 'react'
export interface HomeProps { greet?:any }
export class Home extends React.Component<HomeProps,undefined> {
render() {
return (
<div>
Hello World
<div>
<button onClick={this.props.greet}>Say Hello</button>
</div>
</div>
);
}
}
References
https://github.com/mhdr/ReactJSSamples/tree/master/009
App.tsx
import * as React from 'react'
import {Home} from "./components/Home";
export interface AppProps { compiler: string; framework: string; }
class App extends React.Component<AppProps,undefined> {
render() {
return (
<div>
Hello World
<Home Link="Home"/>
</div>
);
}
}
export default App;
components/Home.tsx
import * as React from 'react'
export interface HomeProps {Link?:string }
export const Home = (props: HomeProps) => {
return (
<div>
<a href="#">{props.Link}</a>
</div>
);
};
References
https://github.com/mhdr/ReactJSSamples/tree/master/008
/components/Home.tsx
import * as React from 'react'
export interface HomeProps {
number?: number
}
export interface HomeState {
number: number
}
export class Home extends React.Component<HomeProps,HomeState> {
constructor(props: HomeProps) {
super();
this.state = {
number: props.number
};
}
public static defaultProps: Partial<HomeProps> = {
number: 0
};
increaseNumber() {
let newNumber: number;
newNumber = this.state.number + 1;
this.setState({
number: newNumber
});
}
render(): JSX.Element {
return (
<div>
<p>Count : {this.state.number}</p>
<button className="btn btn-primary" onClick={()=>{this.increaseNumber()}}>Increase Number</button>
</div>
);
}
}
App.tsx
import * as React from 'react'
import {Home} from "./components/Home"
export interface AppProps { }
class App extends React.Component<AppProps,undefined> {
render() {
return (
<div>
<Home />
</div>
);
}
}
export default App;
References
https://github.com/mhdr/ReactJSSamples/tree/master/007