We Keep Coding

component is defined but never used no-unused-vars error warning in reactjs

import React from "react";
import navBar from "./components/navBar/navBar"; //navBar is imported here
function App() {
return (
<>
<div className="App">
<navBar /> //navBar is used here
</div>
</>
);
}
export default App;
I changed the eslint. But no use and tried some stackoverflow solutions but no change.

In JSX, lower-case tag names are considered to be HTML tags.
So you can change the component name to NavBar, or while importing you can write import NavBar from "./components/navBar/navBar"; //navBar is imported here

Rows, Cols, and Tables in React JS

I'm a React JS Beginner and I'm trying to create a table (or grid) by React Js. I've searched through different sites and tried different ways. I've used react-row, react-bootstrap, react-table, and followed the instructions step by step. However, none of them works. I tried to display a row with 3 cells but all of them displayed 3 rows :<<. Please, can you guys give me other ways or show me how to use the 3 mentioned libraries clearly. Thanks
Here is one of my case,
import React, {useState, useEffect, Component} from 'react';
import AppNavBar from './AppNavBar.js';
import {Container, Row, Col} from 'react-bootstrap';
const RestaurantReview = (props) => {
return(
<>
<AppNavBar />
<Row>
<Col>1</Col>
<Col>2</Col>
<Col>3</Col>
</Row>
</>
)
}
export default RestaurantReview

If you have a stylesheet that you're referencing in this component you can add the below line at the top of it to ensure you pull in the default bootstrap styles.
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css");
Then you can import that stylesheet in your App.js component or into RestaurantReview.js whichever you prefer. Preferably in App.js that way you can use the bootstrap styles in other components.
App.js
import React from "react";
import RestaurantReview from "./components/RestarauntReview";
import "./styles.css"; // this is where you import the bootstrap styles
function App() {
return (
<div className="App">
<RestaurantReview />
</div>
);
}
export default App;
This way you won't have to change any of your code in RestaurantReview.js
Here is a codesandbox with all of the code.

I have not been able to use the react router

I try to make a simple application with react, mongodb and nodejs. I reached the point where I need to route the application and for this I use "BrowserRouter" just as a test I separated some code into a separate component and tried to call it as a label in my base code in the App.js file, however I don't get an answer of it. It works fine while I have the code inside the App.js file but not outside it.
from the browser in the terminal it only tells me that there is an error in the code that separates and only that.
App.js
import React,{ Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Add from './Add';
class App extends Component{
render(){
return (
<BrowserRouter>
<div>
{/*Navigation*/}
<nav className="light-blue darken-4">
<div className="container">
<a className="brand-logo" href="/">Octopus</a>
</div>
</nav>
<Switch>
<Route path='/' component={Add}/>
</Switch>
</div>
</BrowserRouter>
)
}
}
Add.js
import React, { Component } from 'react';
class Add extends Component {
render() {
return (
<div className="container">
</div>
)
}
}
export default Add;
browser:
The above error occurred in the component:
in Add (created by App)
in div (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in App

Rendering the component in the react as variable vs jsx component

The following code is taken from crate react app
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(<App/>, document.getElementById('root'));
serviceWorker.register()
The below code i have written
const a =
(
<div>
<h1>Visibility Toogle </h1>
<button>Show details</button>
</div>
);
ReactDOM.render(<a/>,document.getElementById('app'));
I am unable to see anything on my screen ,just a blank page but I changed the following line Now fine
ReactDOM.render(a,document.getElementById('app'));
render i have seen the syntax i came to know the first element must be jsx thinking this is also jsx but i want to know why i failed
2)i tryied with {a} also i failed a is also javascript method why it failed

You have two issues.
First one: React components must start with Uppercase, otherwise react thinks that they are standard HTML tags.
Second one: you are not rendering any component. The root of a react application must be a component.
So change your code to something like:
const Ex = () =>
(
<div>
<h1>Visibility Toogle </h1>
<button>Show details</button>
</div>
);
ReactDOM.render(<Ex/>,document.getElementById('app'));

React not updating the DOM (Laravel)

I have set up a basic react app with hash navigation. Problem is when I click on any link to navigate between pages, I see that the hash in the url is changing properly, as well as I added a console.log in my layour's render to see if it's getting called and it is, with proper this.props.children values, however the page is not rendering anything. If I go to any route and refresh the page I see the correct components rendered, but if I navigate somewhere from there noting gets rendered until I refresh again.
import React from "react";
import ReactDOM from "react-dom";
import { IndexRoute, Router, Route, Link, hashHistory as history } from 'react-router';
class Layout extends React.Component {
render() {
console.log(this.props, document.location.hash);
return <div>
<div>
<span>LEYAUTI MLEAYTI {Math.random()}</span>
</div>
<div>
{this.props.children}
</div>
<div>
{this.props.params.project}
</div>
</div>
}
}
class CreateProject extends React.Component {
render() {
return <div>
<h1>Create PROEKT</h1>
</div>
}
}
class Projects extends React.Component {
render() {
return <div>
<h1>PROEKTI MROEKTI</h1>
<Link to="/projects/create">New project</Link>
</div>
}
}
ReactDOM.render(
<Router history={history}>
<Route path="/" component={Layout}>
<IndexRoute component={Projects}/>
<Route path="projects/create" component={CreateProject}/>
</Route>
</Router>,
document.getElementById('app-root'));
Here is a visual of what's happening in the console when I navigate on a couple routes, but the DOM remains unchanged

This may be an issue with hashHistory. Which react-router version are you using? With v4 and above, you need to use history like so -
import createHistory from 'history/createHashHistory'
const history = createHistory()
// pass history to the Router....

Your component didn't actually unmount/remount if you only update your hashtag in your url. The route however, is updated. So you can only see the component loads content for once when you refresh the page.
You will need to create state variables and update it in a routeChange handler callback and bind the updated state variable to your view by using setState. Then the component can get updated.
See this post for how to add the route change listener (https://github.com/ReactTraining/react-router/issues/3554)

Alright, so I got down to the bottom of it.
The problem was that I was including my client.min.js file before the default app.js file of laravel 5.4's default layout. For some reason it broke react in a very weird way. What I had to do is switch the order in which the two files were included.