react - Techlye

fontawesome in react

Leave a Comment / fontawesome, icons, react / By Kanha Help Me

1. Install FontAwesome First npm i —save @fortawesome/fontawesome–svg–core npm install —save @fortawesome/free–solid–svg–icons npm install —save @fortawesome/react–fontawesome npm install —save @fortawesome/free–brands–svg–icons npm install —save @fortawesome/free–regular–svg–icons 2. Import to your component import { FontAwesomeIcon } from ‘@fortawesome/react-fontawesome’ import { faCoffee } from ‘@fortawesome/free-solid-svg-icons’ 3. Now you can use inside your html <FontAwesomeIcon icon={faCoffee} size=“5x”/> All other style …

fontawesome in react Read More »

react button click with argument

Leave a Comment / react / By Kanha Help Me

<div className=“d-flex justify-content-between”> <div> <button type=“button” className=“btn btn-primary” onClick={() => handleBtnClick(‘-1’)}> ← Previous</button> </div> <div> <button type=“button” className=“btn btn-primary” onClick={() => handleBtnClick(‘+1’)}>Next →</button> </div> </div>

using same component for different route path in react-router v6

Leave a Comment / js, react / By Kanha Help Me

Using different key for each route should force components to rebuild: import React, { Component } from ‘react’;import Navbar from ‘./Components/Navbar’;import News from ‘./Components/News’;import Test from ‘./Components/Test’;import NoMatch from ‘./Components/NoMatch’;import { BrowserRouter , Route, Routes } from ‘react-router-dom’export default class App extends Component { render() { return <div> <BrowserRouter> < Navbar /> <Routes> <Route path=”/” element={<News pageSize={8} …

using same component for different route path in react-router v6 Read More »

Use React Router Dom V6

Leave a Comment / react / By Kanha Help Me

install latest versionnpm install react-router-dom For v6 use belowimport React, { Component } from ‘react’;import Navbar from ‘./Components/Navbar’;import News from ‘./Components/News’;import { BrowserRouter as Router, Route, Routes } from ‘react-router-dom’export default class App extends Component { render() { return <div> <Router> < Navbar /> <Routes> <Route exact path=”/” element={<News pageSize={8} category=”general”/>}/> <Route exact path=”/business” …

Use React Router Dom V6 Read More »

fixed ‘Switch’ is not exported from ‘react-router-dom’

Leave a Comment / javascript, react / By Kanha Help Me

I also faced the same problem, and I searched the Internet so much, but I didn’t get any answer according to my question. So I uninstalled version 6 of react-router-dom: npm uninstall react-router-dom And installed version 5.2.0 of react-router-dom: npm install [email protected] use below import { BrowserRouter as Router, Switch, Route, Link} from “react-router-dom”;export …

fixed ‘Switch’ is not exported from ‘react-router-dom’ Read More »

React: Trigger onChange if input value is changing by state? override the value of input box

Leave a Comment / react / By Kanha Help Me

input = document.getElementById(id-of-the-input-box); lastValue = input.value; console.log(lastValue) input.value = new-value-here; event = new Event(“change”, { bubbles: true }); tracker = input._valueTracker; if (tracker) { tracker.setValue(lastValue); } input.dispatchEvent(event);