Hello I’m new to react and got myself stuck here, my version is v6 and hence having a bit of a problem understanding, I’m following a tutorial from udemy
The error that occurred is – Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.
this is in my Home.js
JavaScript
x
103
103
1
class Dashboard extends Component {
2
constructor(props) {
3
super(props);
4
this.state = {
5
child: props.nestedRoute,
6
search: "",
7
};
8
}
9
10
componentDidMount() {
11
this.activeNav();
12
}
13
14
activeNav() {
15
const pathname = window.location.pathname;
16
const possibleRoutes = [
17
{ routes: "/dashboard", targetId: "home" },
18
{ routes: "/addProduct", targetId: "addProduct" },
19
{ routes: "/products", targetId: "products" },
20
{ routes: "/profile", targetId: "profile" },
21
];
22
possibleRoutes.forEach(({ route, targetId }) => {
23
window.jQuery(`#${targetId}`).removeClass("active");
24
if (route === pathname) {
25
window.jQuery(`#${targetId}`).addClass("active");
26
}
27
});
28
}
29
30
render() {
31
const Child = this.state.child
32
console.log(Child)
33
const { user } = this.props.auth;
34
35
return (
36
<div id="content-wrapper" className="d-flex flex-column">
37
<div id="content">
38
<nav className="navbar navbar-expand navbar-light bg-white topbar mb-44 static-top shadow">
39
<ul className="navbar-nav ml-auto">
40
<li className='nav-item dropdown no-arrow'>
41
<Link
42
className="nav-link dropdown-toggle"
43
to="#"
44
id="userDropdown"
45
role="button"
46
data-toggle="dropdown"
47
aria-haspopup="true"
48
aria-expanded="false"
49
>
50
<span className="mr-2 d-none d-lg-inline text-gray-600 small">
51
{user.name}
52
</span>
53
<Avatar size={40}>
54
{user.name && this.avatarText(user.name)}
55
</Avatar>
56
</Link>
57
58
<div
59
className="dropdown-menu dropdown-menu-right shadow animated--grow-in"
60
aria-labelledby="userDropdown"
61
>
62
<Link className="dropdown-item" to="#">
63
<i className="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
64
Profile
65
</Link>
66
<Link className="dropdown-item" to="#">
67
<i className="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
68
Settings
69
</Link>
70
<Link className="dropdown-item" to="#">
71
<i className="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
72
Activity Log
73
</Link>
74
<div className="dropdown-divider"></div>
75
<Link
76
className="dropdown-item"
77
to="#"
78
onClick={this.logUserOut}
79
>
80
<i className="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
81
Logout
82
</Link>
83
</div>
84
</li>
85
</ul>
86
</nav>
87
<Child {this.props} search={this.state.search} />
88
</div>
89
</div>
90
);
91
}
92
}
93
94
Dashboard.propTypes = {
95
auth: PropTypes.object.isRequired,
96
logout: PropTypes.func.isRequired,
97
};
98
99
const mapStateToProps = (state) => ({
100
auth: state.auth,
101
});
102
103
export default connect(mapStateToProps, { logout })(Dashboard);
my App.js looks like this
JavaScript
1
28
28
1
function App(props) {
2
useEffect(() => {
3
store.dispatch(setCurrentUser())
4
}, [])
5
6
return (
7
<Provider store={store}>
8
<Router>
9
<Routes>
10
<Route exact path="/" element={<Landing/>} />
11
<Route exact path="/" element={<ProtectedRoute/>}>
12
<Route exact
13
path="/dashboard"
14
element={()=> (<Dashboard {props} nestedRoute={Home} />)}
15
/>
16
<Route exact
17
path="/dashboard/addProduct"
18
element={()=> (<Dashboard {props} nestedRoute={AddProduct} />)}
19
/>
20
</Route>
21
<Route exact path="/register" element={<Register/>} />
22
<Route exact path="/login" element={<Login/>} />
23
</Routes>
24
</Router>
25
</Provider>
26
27
);
28
}
Advertisement
Answer
In your react router use the render method.
JavaScript
1
5
1
<Route exact
2
path="/dashboard/addProduct"
3
render={()=> <Dashboard {props} nestedRoute={AddProduct} />}
4
/>
5