I get this warning in my browser
Warning: validateDOMNesting(...): cannot appear as a descendant of . in a (at App.js:79) in a (created by LinkAnchor) in LinkAnchor (created by Context.Consumer) in Link (at App.js:79) in nav (at App.js:77) in header (at App.js:70) in div (at App.js:68) in Router (created by BrowserRouter) in BrowserRouter (at App.js:67) in App (created by ConnectFunction) in ConnectFunction (at src/index.js:23) in Provider (at src/index.js:22)
from below code
<Link to={'/addRobo'} className="nav-link"><a className="f6 f5-l link bg-animate black-80 hover-bg-light-green dib pa3 ph4-l" href="1">Add Robot</a></Link>
Also this code
import React, {
Component
} from 'react';
import {
Link,
Route,
Switch
} from 'react-router-dom';
import {
BrowserRouter as Router
} from 'react-router-dom';
import {
connect
} from 'react-redux';
import {
setSearchField,
requestRobots
} from '../actions';
import CardList from '../components/CardList';
import SearchBox from '../components/SearchBox';
import Scroll from '../components/Scroll';
import ErrorBoundry from '../components/ErrorBoundry';
import AddRobot from '../components/AddRobot';
import UppdateRobot from '../components/UpdateRobot';
import DeleteRobot from '../components/DeleteRobot';
import './App.css';
// parameter state comes from index.js provider store state(rootReducers)
const mapStateToProps = (state) => {
return {
searchField: state.searchRobots.searchField,
robots: state.manage_data.robots,
isPending: state.manage_data.isPending
}
}
// dispatch the DOM changes to call an action. note mapStateToProps returns object, mapDispatchToProps returns function
// the function returns an object then uses connect to change the data from redecers.
const mapDispatchToProps = (dispatch) => {
return {
onSearchChange: (event) => dispatch(setSearchField(event.target.value)),
onRequestRobots: () => dispatch(requestRobots()),
}
}
class App extends Component {
componentDidMount() {
console.log(this.props.userinfo);
this.props.onRequestRobots();
}
render() {
const {
robots,
searchField,
onSearchChange,
isPending
} = this.props;
const stylecur = {
fill: 'currentcolor'
};
const filteredRobots = robots.filter(robot => {
return robot.name.toLowerCase().includes(searchField.toLowerCase());
})
const routes = [{
id: 1,
path: '/addRobo',
component: AddRobot
},
{
id: 2,
path: '/updateRobo',
component: UppdateRobot
},
{
id: 3,
path: '/searchRobo',
component: SearchBox
},
{
id: 4,
path: '/delRobo',
component: DeleteRobot
}
];
return ( <
Router >
<
div className = 'tc' >
<
header className = "bg-white black-80 tc pv4 avenir" >
<
a href = ""
className = "bg-black-80 ba b--black dib pa3 w2 h2 br-100" >
<
svg className = "white"
data - icon = "skull"
viewBox = "0 0 32 32"
style = {
stylecur
} >
<
title > skull icon < /title><path d="M16 0 C6 0 2 4 2 14 L2 22 L6 24 L6 30 L26 30 L26 24 L30 22 L30 14 C30 4 26 0 16 0 M9 12 A4.5 4.5 0 0 1 9 21 A4.5 4.5 0 0 1 9 12 M23 12 A4.5 4.5 0 0 1 23 21 A4.5 4.5 0 0 1 23 12"></path > < /svg> <
/a> <
h1 className = "mt2 mb0 baskerville i fw1 f1" > RoboFriends < /h1> <
h2 className = "mt2 mb0 f6 fw4 ttu tracked" > Create an ensembe of Robot with your friends! < /h2> <
nav className = "bt bb tc mw7 center mt4" >
<
a className = "f6 f5-l link bg-animate black-80 hover-bg-lightest-blue dib pa3 ph4-l"
href = "/" > Home < /a> <
Link to = {
'/addRobo'
}
className = "nav-link" > < a className = "f6 f5-l link bg-animate black-80 hover-bg-light-green dib pa3 ph4-l"
href = "1" > Add Robot < /a></Link >
<
Link to = {
'/updateRobo'
}
className = "nav-link" > < a className = "f6 f5-l link bg-animate black-80 hover-bg-light-blue dib pa3 ph4-l" > Update Robot < /a></Link >
<
Link to = {
'/searchRobo'
}
className = "nav-link" > < a className = "f6 f5-l link bg-animate black-80 hover-bg-light-pink dib pa3 ph4-l" > Search Robot < /a></Link >
<
a className = "f6 f5-l link bg-animate black-80 hover-bg-light-yellow dib pa3 ph4-l" > < Link to = {
'/delRobo'
}
className = "nav-link" > Delete Robot < /Link></a >
<
/nav> <
/header> <
Switch > {
routes.map(({
id,
path,
component: Component
}) => ( <
Route key = {
id
}
path = {
path
}
component = {
Component
} // sans the angle brackets </>
/>))
} <
/Switch> <
Scroll > {
isPending ? < h1 > Loading < /h1> : <
ErrorBoundry >
<
CardList robots = {
filteredRobots
}
/> <
/ErrorBoundry>
} <
/Scroll> <
/div> <
/Router>
);
}
}
// action done from mapDispatchToProps will channge state from mapStateToProps
export default connect(mapStateToProps, mapDispatchToProps)(App)
