I'm getting this error when web pack compiles:
I couldn't find an answer on google or Stackoverflow.
Here is my component:
import React from 'react'
import { Form, Button } from 'react-bootstrap'
import { reduxForm } from 'redux-form'
import { connect } from 'react-redux'
import ContactInfo from './ContactInfo'
const CheckoutForm = props => {
return (
<Form className="forms" onSubmit={props.handleSubmit}>
<PanelGroup id="checkout-panels">
<ContactInfo {...props} />
</PanelGroup>
<Button className="btn-green pull-right" type="submit" >Submit</Button>
</Form>
)
}
CheckoutForm = reduxForm({
form: 'checkoutForm',
destroyOnUnmount: true
})(CheckoutForm)
CheckoutForm = connect(state => ({
initialValues:
{
payment_type: 'credit_card',
...state.checkout
}
}))(CheckoutForm)
export default CheckoutForm
Can anyone help? I'm sure its a super simple fix. I just can't find it. Thank you!
Your problem is here
const CheckoutForm
Change it for
let CheckoutForm
Consts are read-only, you just can set a value one time, and after that you can't change it.
Read here about consts Const in ES6
Ah! Found it. It was a simple oversight. Hope this helps someone.
I needed to change const to let:
let CheckoutForm = props => {
return (
...
)
}
Related
I followed the doc of SunEditor, it's like:
import React from 'react';
import dynamic from "next/dynamic";
import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File
const SunEditor = dynamic(() => import("suneditor-react"), {
ssr: false,
});
const MyComponent = props => {
return (
<div>
<p> My Other Contents </p>
<SunEditor />
</div>
);
};
export default MyComponent;
It works well, but when I add setOptions into SunEditor:
import { buttonList } from "suneditor-react";
...
<SunEditor
setOptions={{buttonList:buttonList.complex}}
/>
I got this error:
SyntaxError: Cannot use import statement outside a module
Am I missing something, and how can I fix it?
For the same reason you have to dynamically import SunEditor, you also have to dynamically import buttonList.
One approach is to create a custom component where you add all the suneditor code.
import React from 'react';
import SunEditor, { buttonList } from 'suneditor-react';
const CustomSunEditor = () => {
return <SunEditor setOptions={{ buttonList: buttonList.complex }} />;
};
export default CustomSunEditor;
Then, dynamically import that component with next/dynamic where needed.
const CustomSunEditor = dynamic(() => import('../components/CustomSunEditor'), {
ssr: false,
});
const MyComponent = props => {
return (
<div>
<p> My Other Contents </p>
<CustomSunEditor />
</div>
);
};
I have this export of a working component:
export default connect(
mapStateToProps, actions,
null, { withRef: true, forwardRef: true }
)(withTheme()(withStyles(styles)(MainMenu)));
And its call:
<MainMenu
ref={(connectedMenu) => this.menuRef = connectedMenu.getWrappedInstance()}
user={user}
/>
I've expected to get a MainMenu ref, but I keep getting WithTheme object instead.
I've also tried to get through innerRef, but got the following errors:
TypeError: connectedMenu.getWrappedInstance is not a function
TypeError: Cannot read property 'getWrappedInstance' of null
Before all of that I've tried that React.createRef() format, but it didn't worked.
How do I get this ref?
Assuming you are using v4 of Material-UI, your syntax for withTheme is incorrect. In v4 the first set of parentheses was removed.
Instead of
withTheme()(YourComponent)
you should have
withTheme(YourComponent)
Below is code from a modified version of the react-redux todo list tutorial that shows the correct syntax. I've included here the two files that I changed (TodoList.js and TodoApp.js), but the sandbox is a fully working example.
In TodoApp, I use the ref on TodoList to get and display its height. The displayed height will only get updated if TodoApp re-renders, so I've included a button to trigger a re-render. If you add a couple todos to the todo list, and then click the re-render button, you will see that the new height of the list is displayed (showing that the ref is fully working).
In TodoList, I'm using withStyles to add a blue border around the todo list to show that withStyles is working, and I'm displaying the primary color from the theme to show that withTheme is working.
TodoList.js
import React from "react";
import { connect } from "react-redux";
import Todo from "./Todo";
import { getTodosByVisibilityFilter } from "../redux/selectors";
import { withStyles, withTheme } from "#material-ui/core/styles";
import clsx from "clsx";
const styles = {
list: {
border: "1px solid blue"
}
};
const TodoList = React.forwardRef(({ todos, theme, classes }, ref) => (
<>
<div>theme.palette.primary.main: {theme.palette.primary.main}</div>
<ul ref={ref} className={clsx("todo-list", classes.list)}>
{todos && todos.length
? todos.map((todo, index) => {
return <Todo key={`todo-${todo.id}`} todo={todo} />;
})
: "No todos, yay!"}
</ul>
</>
));
const mapStateToProps = state => {
const { visibilityFilter } = state;
const todos = getTodosByVisibilityFilter(state, visibilityFilter);
return { todos };
};
export default connect(
mapStateToProps,
null,
null,
{ forwardRef: true }
)(withTheme(withStyles(styles)(TodoList)));
TodoApp.js
import React from "react";
import AddTodo from "./components/AddTodo";
import TodoList from "./components/TodoList";
import VisibilityFilters from "./components/VisibilityFilters";
import "./styles.css";
export default function TodoApp() {
const [renderIndex, incrementRenderIndex] = React.useReducer(
prevRenderIndex => prevRenderIndex + 1,
0
);
const todoListRef = React.useRef();
const heightDisplayRef = React.useRef();
React.useEffect(() => {
if (todoListRef.current && heightDisplayRef.current) {
heightDisplayRef.current.innerHTML = ` (height: ${
todoListRef.current.offsetHeight
})`;
}
});
return (
<div className="todo-app">
<h1>
Todo List
<span ref={heightDisplayRef} />
</h1>
<AddTodo />
<TodoList ref={todoListRef} />
<VisibilityFilters />
<button onClick={incrementRenderIndex}>
Trigger re-render of TodoApp
</button>
<div>Render Index: {renderIndex}</div>
</div>
);
}
I am using react along with redux and material-ui to make a component. I am attempting to write an export statement export default connect()(withRouter(FirstPage))(withStyles(styles)(FirstPage))
However, this doesn't seem to work I get an error that says
TypeError: Cannot set property 'props' of undefined
this.props = props;
This error is referencing one of my node_modules.
Here is my full code:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import {withRouter} from 'react-router-dom'
import { withStyles } from '#material-ui/core/styles';
import Card from '#material-ui/core/Card';
import CardActions from '#material-ui/core/CardActions';
import CardContent from '#material-ui/core/CardContent';
import Button from '#material-ui/core/Button';
const styles = theme =>({
root: {
maxWidth: 345,
},
})
class FirstPage extends Component {
state = {
feeling: ''
}
//This function will dispatch the users response to index.js
//The dispatch type here is 'SET_FEELING'
submitData=(event) => {
event.preventDefault();
this.props.dispatch({type: 'SET_FEELING', payload: this.state})
this.changeLocation();
}
//This function will update the local state with the users response
handleChange= (event) => {
this.setState({
feeling: event.target.value
})
}
//This function will change the current url when a button is clicked
changeLocation= ()=> {
this.props.history.push('/secondPage')
}
render(){
const { classes } = this.props;
return(
<div>
<Card >
<CardContent className={classes.root}>
<form>
<input onChange={this.handleChange} placeholder='How are you feeling' value={this.state.feeling} />
</form>
</CardContent>
<CardActions>
<Button onClick={this.submitData}>Submit</Button>
</CardActions>
</Card>
</div>
)
}
}
//this export connects the component to the reduxStore as well as allowing us to use the history props
export default connect()(withRouter(FirstPage))(withStyles(styles)(FirstPage))
I believe the following code should work:
export default withRouter(connect()(withStyles(styles)(FirstPage)))
Instead of
export default connect()(withRouter(FirstPage))(withStyles(styles)(FirstPage))
First of all, connect() returns a function that only accepts an argument. Second, connect() should be wrapped inside withRouter(). This problem is stated in the github docs of React Router.
without using react-redux :
export default (withStyles(styles), withRouter)(FirstPage);
I using Redux-Form 7.3.0. I am trying to get the values of my form in another component. I read the instruction at the website of Redux form but didn't work.
this is the code of my componenet:
import React from 'react'
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import { formValueSelector } from 'redux-form';
class Test extends React.Component {
render() {
console.log(this.props);
return (
<div>
test
{this.props.title}
</div>
);
}
}
const selector = formValueSelector('NewPostForm');
Test = connect(
state => ({
title: selector(state, 'title')
})
)(Test)
export default Test;
This is my form component:
import React from 'react';
import { Field, reduxForm } from 'redux-form';
class NewPost extends React.Component {
renderField(field) {
return (
<div>
<label>{field.label}</label>
<input type="text" {...field.input} />
</div>
);
}
showResults(values) {
window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`);
}
render() {
const { pristine, submitting, handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit(this.showResults)} >
<div>
<Field
label='Title'
name='title'
component={this.renderField}
/>
<button type='submit' disabled={submitting}>
Submit the from :)
</button>
</div>
</form>
);
}
}
export default reduxForm({ form: 'NewPostForm'})(NewPost);
but I always get
title:undefined
I found the same question here but it did not help me.
Your Test component has two imports from "redux-form". Please make it just one, like this:
import { Field, reduxForm, formValueSelector } from 'redux-form'
If your NewPost component gets unmounted at any moment, maybe by changing view or something during a navigation, the state of the form gets destroyed. You can avoid such default behavior by adding destroyOnUnmount attribute with a false value to your reduxForm wrapper:
export default reduxForm({
form: 'NewPostForm',
destroyOnUnmount: false
})(NewPost)
If this doesn't help you, please provide a better context of how you're using your components.
UPDATE: I made an example where I define 4 components:
NewPost.js: It's the form connected to the store with redux-form.
ShowPost.js: Shows what was captured (the post) by the form when you hit the submit button. This data is set to the NewPost internal state, and then it's passed as prop.
ShowPostFromSelector.js: Shows what is being captured by the form, this due to the use of the selector formValueSelector.
App.js: It's the container of the 3 components above, where the onSubmit function is defined.
Here it is: https://codesandbox.io/s/w06kn56wqk
I have a react component that will throws an error when I try to dispatch a redux action. Here is the component:
import React from 'react';
import { connect } from 'react-redux';
import { createBook } from './actions/books';
import './InputForm.css';
export class InputForm extends React.Component {
onFormSubmit(event) {
event.preventDefault();
let newBook = {
title: this.titleInput.value,
author: this.authorInput.value,
description: this.descriptionInput.value
}
this.props.dispatch(createBook(newBook));
}
render() {
return (
<div>
<form onSubmit={event => this.onFormSubmit(event)}>
<input className="form-input" placeholder="Title" ref={input => this.titleInput = input} />
<input className="form-input" placeholder="Author" ref={input => this.authorInput = input} />
<input className="form-input form-text-area" placeholder="Description" ref={input => this.descriptionInput = input} />
<button className="form-button" type="submit">Submit</button>
</form>
</div>
)
}
}
export default connect()(InputForm);
This is the line that creates the problem:
this.props.dispatch(createBook(newBook));
I'm not sure what's going on. Here is the error I get:
Uncaught TypeError: this.props.dispatch is not a function
at InputForm.onFormSubmit (InputForm.js:15)
at onSubmit (InputForm.js:21)
at HTMLUnknownElement.callCallback
I have another component set up almost identically using a different action. It works fine. Here is that component if anyone wants to compare:
import React from 'react';
import './Book.css';
import { deleteBook } from './actions/books';
import { connect } from 'react-redux';
export class Book extends React.Component {
onDelete(event) {
this.props.dispatch(deleteBook(this.props.id));
}
render() {
return (
<div className="book-container">
<h4>{this.props.title}</h4>
<p>{this.props.author}</p>
<p>{this.props.description}</p>
<p>{this.props.id}</p>
<button className="book-delete-button" onClick={event => this.onDelete(event)}>Delete</button>
</div>
)
}
}
export default connect()(Book);
Dunno what's going on here. Please help!
Seems like there at least 2 issues here that can cause a problem.
It depends on how you import the components. You are exporting 2
components in each module:
A named export (the component)
And a default export (the new connected component).
If you import the named export:
import { InputForm } from './path';
You will not have the redux related props as this is not the
connected component.
This is why one of your other connected components is working fine even though it seems to have the same code and structure pattern.
You probably import it the way you should (default import).
Make sure you import the default component:
import InputForm from './path';
Another thing that caught my eye, is that you are not binding the
event handler onFormSubmit, so i expect the this to be the
element that triggered the event. Though i think if that was the
issue, you would get a different error anyway.
I had imported the disconnected version in the container component. Stupid mistake.