React — Tips & Tricks

📄 Table of contents

◉ how to pass props from PARENT to CHILD in Class vs Functional components

import React, { Component } from 'react';class App extends Component {
render() {
return (
<div>
<Greeting greeting={{ text: 'Welcome to React' }} />
</div>
);
}
}
const Greeting = ({ greeting }) => <h1>{greeting.text}</h1>;export default App;
function App() {
const blogPost = {
title: 'How to pass prop to components',
description: 'Your component library for ...',
};
return (
<div>
<BlogCard
title
={blogPost.title}
description={blogPost.description} />
</div>
);
}

function BlogCard({ title, description }) {
return (
<div>
<h1>{title}</h1>
<p>{description}</p>
</div>
);
}

Passing a function as a prop to a functional component

const ChildComp = ({ logThis }) => (
<button onClick={() => logThis('test string')}>Click Here</button>
)
const ChildComp = (props) => (
<button onClick={() => props.logThis('test string')}>Click Here</button>
)

◉ Sending props as strings (instead of numbers)

<MyComponent value=”4” />
<MyComponent value={4} />

React — How to force a function component to render?

🎉 You can now, using React hooks

◉ Prop validation

import PropTypes from 'prop-types';function BlogCard({ title, description }) {
return (
<div>
<h1>{title}</h1>
<p>{description}</p>
</div>
);
}
BlogCard.propTypes = {
title: PropTypes.string,
description: PropTypes.string,
};

◉ difference between import {sthg…} vs import sthg…

◉ template literal usage

console.log(`Using video device: ${videoTracks[0].label}`);console.log("Using video device: " + videoTracks[0].label);

◉ delete remote branch on git

$ git push -d origin dev
To github.com:bobbykjack/sandbox.git
- [deleted] dev

◉ useState on array

const [optionsList, setOptionsList] = useState(["default"]);setOptionsList([...optionsList, `${videoTracks[0].label}`]);

◉ How to submit form data in React

<form onSubmit={handleSubmit}>
<div>
<label>Email address</label>
<input
type="email"
name="email"
placeholder="Enter email"
onChange={handleEmailChange}
value={email}
/>
</div>
<button type="submit">
Submit
</button>
</form>

◉ Handling Multiple Inputs with a Single onChange Handler in React

◉ handle multiple setStates in consecutive

handlePetsUpdate = (petCount) => {
this.setState({ petCount });
this.props.callback(this.state.petCount); // Old value
};
handlePetsUpdate = (petCount) => {
this.setState({ petCount }, () => {
this.props.callback(this.state.petCount); // Updated value
});
};

◉ Add Required (*) using CSS on dynamic form data

<div class="form-group">
<label class="control-label required" for="username">Username</label>
<input type="text" id="username" name="data[username]" required="required" class="form-control">
</div>
form label.required:after
{
color: red;
content: " *";
}

◉ Toggle a ClassName — the Hooks way

Toggle between two classnames

return (
<div className={isActive ? "app" : "container"}>
...
)

Adding a classname to the existing class name

return (
<div className={`app ${isActive ? "danger" : ""}`}>
...
)

fetch data from APIs with Axios and Hooks

multiple option selection in react select

Form Validations

◉ How To Format Code with Prettier in Visual Studio Code

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.