My code is :
import React, { Component } from 'react';
import { Card } from './Card';
import { Checkbox } from 'react-icheck';
class User extends Component {
render() {
return (
<Card>
<Checkbox
checkboxClass="icheckbox_square-blue"
increaseArea="20%"
label="Do you want to receive notification ?"
/>
</Card>
);
}
}
export default User;
Error : Expected a component class, got[object Object].
I don't know why I am getting errors for Checkbox Component.
version :
"icheck": "^1.0.2",
"react": "16.0.0-alpha.12",
"react-icheck": "^0.3.8",
"react-native": "0.47.1",
Can anyone say where I am doing wrong?
Can anyone say where I am doing wrong ?
You are trying to use DOM based Components inside a react-native application.
I don't think, that I should explain the difference
Related
Good Morning!
I'm starting react hooks, but it throws me the following error when wanting to use useEffect:
Line 4:5: React Hook "useEffect" is called in function "profile" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
The code is the following:
profile.js
import React, { useEffect } from 'react';
function profile(props) {
useEffect(() => {
document.title = props.nameAtributte;
}, [props.nameAtributte])
return (
<div style={{background:"yellow"}}>
It's my profile component {props.nameAtributte}
</div>
);
}
export default profile;
App.js
import React, {useState, useEffect} from 'react';
import Profile from './components/profile';
//import logo from './logo.svg';
//import './App.css';
function App() {
const [nombre, changeName] = useState('Juan Parez');
function nombreInput_onChanged(e){
changeName (e.target.value);
}
return (
<div className="App">
<h1>{nombre} eres digno, suficiente e ilimitado</h1>
<input type="text" name="nombreInput" id="nombreInput" value={nombre} onChange={nombreInput_onChanged} />
<Profile nameAtributte={nombre}/>
</div>
);
}
export default App;
package.json
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
What could be happening ?
I am reviewing some solutions here, but they did not work for me.
Thank you very much for the help.
Components name must start with a Capital Letter . As your profile components name starts with 'p' react is not counting it as a valid functional component.
Just change the component name to Profile and it should work fine
One of the rules of JSX is the name of the components must proceed with an uppercase letter.
If your JSX file contains a component that is having a lowercase letter as an initial letter then React will refer to it as a built-in component like <span> or <div> not a react component.
The Dot-notation component like <UserContext.Provider> and any component which starts with a capital letter indicates that the JSX tag is referring to a React component.
That's why you were getting the error as
React Hook "useEffect" is called in function "profile" which is neither a React function component or a custom React Hook function
So, in your case, you only need to change the function name as
function Profile(){
//your code
}
You don't have to change the name of the file i.e profile.js, there is no such rule for that.
You can see the Official React hooks rule book from here.
I get the error message: Invalid hook call. Hooks can only be called inside of the body of a function component when I try to run my react app.
import React from "react";
import BarChart from "../components/BarChart";
import LineChart from "../components/LineChart";
import Navbar from "../components/Navbar";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles({
row: {
display: "flex",
flexDirection: "row"
}
});
const Index = () => {
const classes = useStyles();
return (
<div>
<Navbar />
<div className={classes.row}>
<BarChart />
<LineChart />
</div>
</div>
);
};
export default Index;
It fails in line 16 (const classes = useStyles();).
The Navbar, BarChart and LinChart components is just components that I have created and it doesn't seem like the code breaks in these components. I'm able to run my code without any error messages if iI remove line 16.
Any ideas what might help?
I tried makeStyles locally and it worked perfectly fine. Kindly check your dependencies and update them to latest then try again.
I'm currently having:
"react": "^16.8.2", "react-dom": "^16.8.2", "#material-ui/core": "^4.9.12"
I have this code taken from the official React Ref docs
import React from "react";
import { render } from "react-dom";
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
// create a ref to store the textInput DOM element
this.textInput = React.createRef();
this.focusTextInput = this.focusTextInput.bind(this);
}
focusTextInput() {
// Explicitly focus the text input using the raw DOM API
// Note: we're accessing "current" to get the DOM node
// this.textInput.current.focus();
console.log(this.textInput);
}
render() {
// tell React that we want to associate the <input> ref
// with the `textInput` that we created in the constructor
return (
<div>
<input
type="text"
ref={this.textInput} />
<input
type="button"
value="Focus the text input"
onClick={this.focusTextInput}
/>
</div>
);
}
}
const A = () => {
return <div>
<CustomTextInput />
</div>
}
render(<div><A/></div>, document.getElementById("root"));
and when the focusTextInput is called it logs "current: null".
Here is the demo: https://codesandbox.io/s/wo6qjk9xk7
The code is fine since it's the exact same example present in react docs. Problem is your react-dom version is older. React.createRef() API was introduced in React 16.3 (all react related packages should be 16.3+ in order to use React.createRef()). Check this reference in docs.
Your dependencies:
"dependencies": {
"react": "16.6.3",
"react-dom": "16.2.0"
},
Problem fixed after updating react-dom to 16.6.3
Check this: https://codesandbox.io/s/n7ozx9kr0p
I trying to handle the path when I click <Link/> and I need using e.preventDefault(); for prevent animations inside the router so this is my code,basically I can not capture the location path for change the history target:
import React from 'react';
import { Link } from "react-router-dom";
export default class NavTransitions extends React.Component {
constructor(props) {
super(props);
this.changeRoutePath=this.changeRoutePath.bind(this);
}
changeRoutePath(e){
e.preventDefault();
this.props.history.push(this.match.path);
console.log('this.match.path '+this.match.path);
console.log('changeRoutePath');
}
render(){
return(
<div>
<Link to="/item"
onClick={this.changeRoutePath}>Prevent </Link>
</div>
);
}
}
The error says this.math is undefined
The problem is how you are accessing match:
this.match
but it should be
this.props.match
Like this:
changeRoutePath(e){
e.preventDefault();
this.props.history.push(this.props.match.path);
console.log('this.props.match.path '+ this.props.match.path);
console.log('changeRoutePath');
}
This should help you with the initial problem.
Other approaches
An easy way of doing this is not to use a Link component at all, since you only want to do something on click and the redirect. So just use the simple html component with the onclick event and send the link as a param:
<a
href={'#'}
onClick={(e) => this.changeRoutePath(e, '/item')}>
Prevent
</a>
And the function:
changeRoutePath(e, link){
e.preventDefault();
this.props.history.push(link);
}
You can also use the Link component with arrow functions as well, without the need of binding them in the constructor:
<Link
to="/item"
onClick={(e) => this.changeRoutePath(e)}>
Prevent
</Link>
changeRoutePath(e){
e.preventDefault();
this.props.history.push(this.props.match.path);
}
Also, remember to use withRouter in the component:
import { Link, withRouter } from "react-router-dom";
class NavTransitions extends React.Component {
...
}
export default withRouter(NavTransitions);
React router version:
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
Hope it helps.
I am working on a material-ui package in react.js. I just want to open a drawer and close when I click anywhere on the screen.
my code is just like
import React, {Component} from 'react';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import AppBar from 'material-ui/AppBar';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
export default class extends React.Component {
constructor() {
super();
this.state = {
open: false,
};
}
handleToggle() {
this.setState({
open: !this.state.open
});
}
render() {
const styles = {
container: {
textAlign: 'center',
paddingTop: 200,
},
};
return (
<MuiThemeProvider>
<div>
<AppBar
title="Title"
iconClassNameRight="muidocs-icon-navigation-expand-more"
onTouchTap={(e) => this.handleClick()}
/>
<Drawer open={this.state.open}>
<MenuItem>Menu Item</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
</Drawer>
</div>
</MuiThemeProvider>
);
}
}
and my Package.json file is like
"dependencies": {
"express": "^4.15.2",
"material-ui": "latest",
"next": "^2.1.1",
"next-routes": "^1.0.24",
"prop-types": "^15.5.6",
"react": "^15.4.0",
"react-dom": "^15.5.4",
"react-redux": "^5.0.4",
"react-tap-event-plugin": "^2.0.1"
"redux": "^3.6.0"
}
Actually, i am using next.js with react-redux.
please suggest the best solution for this problem.
Thank You
If you want to open the drawer by clicking anywhere on the screen you can some sort of onClick event that calls your handleToggle function. If you want to Drawer to open when clicking on the actual Drawer you might need to add the onRequestChange prop to the Drawer.
Also, I wanted to point out that it's best practice to use a function in setState in this case instead of an object. It's not best practice to rely on this.state to calculate the next value because setState is an asynchronous function, so this.state.open might not be what you expect it to be. There's a good post you can read more about this approach here.
handleToggle() {
this.setState(function(prevState, props){
return {open: !prevState.open}
});
}
you need to use theses properties on the Drawer
<Drawer
docked={false}
width={200}
open={this.state.open}
onRequestChange={(open) => this.setState({open})}
>
and for Warning: Unknown prop onTouchTap. this mean you not set the Provider. read this topic for usage of Material-UI
http://www.material-ui.com/#/get-started/usage
Thank you for your answer #Mohamed Bionthman and #Turnipdabeets.
I tried to solve this problem with your suggestions but i cann't solve it.
This code is working for me.
Here i find one solution
add into current code.
import injectTapEventPlugin from 'react-tap-event-plugin';
try {
injectTapEventPlugin()
}
catch(e) {
//Don't do anything
}