Using a ReactJS prop as the validator in Redux Form - javascript

How do I tell react to take constraints from a prop passed toLoginForm from its parent?
export default reduxForm({
form: 'LoginForm',
validate: formValidator(constraints)
})(LoginForm)
In the above working code, constraints is not declared outside of the React components.

validate can be passed to the form as a prop instead of the reduxForm config. So you'd pass it when you instantiate:
<LoginForm validate={formValidator(constraints)} />
http://redux-form.com/7.0.3/docs/api/ReduxForm.md/

Related

React PropTypes isRequired warning with cloneElement

React-Numpad is a libarary that works following HoC. There are NumPad and StaticWrapper components (folder: lib/components) that renders children of type: KeyPad, Calendar and Appointment (folder: lib/elements).
While running tests I get some warnings on required props undefined that are initialized in NumPad and StaticWrapper.
The props: confirm, update; are marked as required in children components.
Parent component:
https://github.com/gpietro/react-numpad/blob/v5.0.0-beta.14/lib/components/StaticWrapper.js#L30
Child component:
https://github.com/gpietro/react-numpad/blob/v5.0.0-beta.14/lib/elements/KeyPad.js#L172
Tests giving warning
https://github.com/gpietro/react-numpad/blob/v5.0.0-beta.14/lib/tests/useKeyboardTest.js#L10
Am I missing something?
Thanks
FYI, I found the answer on a react repository issue.
Dan Abramov
Yes, this is expected because elements are checked at the creation
time. So when you write , it turns into a
React.createElement() call, and the props are validated.
When you rely on cloneElement() to specify required props, our
recommendation is to use defaultProps in your component for sensible
fallbacks, e.g.
MyComponent.defaultProps = { onSubmit: () => {} }

ReactJS, Context API) Read another component's state without passing down as prop to it?

I have started learning basic of Context API in ReactJS.
This is a part of reactJS code which uses reactJS.
app.js
import React from 'react';
import ReactDOM from 'react-dom';
import LeftPane from './LeftPane';
import RightPane from './RightPane';
import {SampleProvider} from './sample';
const App =()=>{
return(
<SampleProvider>
<div className="panes">
<LeftPane/>
<RightPane/>
</div>
</SampleProvider>
)
}
export default App;
ReactDOM.render(
<App/>,
document.getElementById('root')
)
RightPane.js
RightPane.js
import React from 'react';
import Receives from './Receives';
const RightPane =()=>{
return(
<div className="pane">
<Receives/>
</div>
)
};
export default RightPane;
sample.js
import React,{Component , createContext} from 'react';
const Context = createContext();
const {Provider, Consumer : SampleConsumer}=Context;
class SampleProvider extends Component{
state={
value:'default value'
}
actions={
setValue:(value)=>{
this.setState({value});
}
}
render(){
const {state,actions}=this;
const value={state,actions};
return(
<Provider value={value}>
{this.props.children}
</Provider>
)
}
}
export{
SampleProvider,
SampleConsumer
};
Receives.js
import React from 'react';
import {SampleConsumer} from './sample';
const Receives = ()=>{
return(
<SampleConsumer>
{
(sample)=>(
<div>
Value:{sample.state.value}
</div>
)
}
</SampleConsumer>
)
}
console.log(Receives);
export default Receives;
Everything is fine. I understand everything except the function in SampleConsumer
component.
function in SampleConsumer uses sample as parameter.
I tested and sample.state.value renders 'default value' and it is the value of the state which is declared in SampleProvider component.
SampleProvider passes down the state as props to Provider component. I understand
Provider can use that state. But how the parameter in SampleConsumer understands
state in SampleProvider component? I have never passed the state as props to
SampleProvider component ..(I understood so. Maybe it's wrong)
I read this documentation
https://reactjs.org/docs/context.html
but didn't understand 100%
Everything is fine. I understand everything except the function in SampleConsumer component.
You have set SampleConsumer to point to the raw Consumer output of createContext(). It will function exactly the same as the ThemeContext.Consumer example in the docs.
function in SampleConsumer uses sample as parameter. I tested and sample.state.value renders 'default value' and it is the value of the state which is declared in SampleProvider component.
You have wrapped the raw Provider output of createContext() with your SampleProvider component. As you did so, you set the Provider's context value to (initially) be:
{
state: {
value: 'default value'
},
actions: {
setValue: (value) => { this.setState({value}) }
}
}
Meaning that whenever you invoke SampleConsumer that is a child of SampleProvider, the argument in the "child as a function" will be passed that value. In other words, this would display the string representation of the object in the above snippet:
<SampleConsumer>
{ (value) => <div>{value.toString()}</div> }
</SampleConsumer>
SampleProvider passes down the state as props to Provider component. I understand Provider can use that state.
Correct - you have set Provider's value prop to be equal to an object that contains SampleProvider's state.
But how the parameter in SampleConsumer understands state in SampleProvider component?
This is exactly what the context API accomplishes. SampleConsumer has access to Provider's value prop, without needing to pass the prop through all the child elements in between. Note that your code here doesn't have anything in between, so it's a little trivial; the docs you linked provide a better example.
I have never passed the state as props to SampleProvider component ..(I understood so. Maybe it's wrong)
You passed SampleProvider's state as a prop to Provider. Provider, in turn, passed its prop down to SampleConsumer.
I think the core of the misunderstanding here is your use (or naming) of SampleProvider. I'm not sure what you're trying to do with that state, but it's not really a "Provider" anymore and makes things confusing. This is unlike your SampleConsumer, which is still the default Consumer, just renamed.

Connect after routed component causing boolean values in props

I am currently building an app with React, React Router and React Redux
Versions:
React - v15.5.4
React Router - v4.0
React Redux - v.5.0.6
I am new to React and even newer to Redux and right when I got my head around the connect HOC I started to have this error that I cant seem to figure out.
When I connect a component to my redux store after a <switch> element and some <Route> elements. My connect within that returns my props as false boolean values where as the component within the connect has the correct props.
See code and error below for example.
Component
UserDashboardPage = connect(state => {
console.log("STATE", state);
return {
user: state.user.user,
userAuth: state.user.userAuth,
userFetched: state.user.fetched
};
})(UserDashboardPage);
UserDashboardPage.propTypes = {
user: PropTypes.shape(),
userAuth: PropTypes.shape(),
userFetched: PropTypes.boolean,
dispatch: PropTypes.func
};
CONSOLE LOG STATE
Connect with boolean prop values
Component with correct props
ERROR:
You are overwriting the local UserDashboardPage variable with the result of calling connect(). You then set PropTypes on the component returned by connect().
While you can do that, what you want in this case is to set the PropTypes of the wrapped component, not the wrapper component. Just swapping the order of execution will do it:
UserDashboardPage.propTypes = {
};
UserDashboardPage = connect(state => {
...
})(UserDashboardPage);
But you may want to consider using a different variable name for one component or the other, e.g.
UserDashboardPage.propTypes = {
};
const ConnectedUserDashboardPage = connect(state => {
...
})(UserDashboardPage);
This is usually not a problem since most people just immediately export the connected component as the default export:
export default connect(...)
The false values you're seeing are from React assigning default values to those props that failed validation. And they will always fail validation since those props are pulled from context, not passed down as normal props.
why are you passing UserDashboardPage into connect? This should be your non connected component

React - Difference between two statements with reduxForm

I have checked sample code of reduxForm with initialized value, the only difference between their code and my code is the following chunk of code..
My Code (Doesn't work with initialValues)
function mapStateToProps(state) {
return{
initialValues: state.account.data
};
}
export default reduxForm({
form:'initializeFromState'
})(connect(mapStateToProps,{load: loadAccount})(InitializeFromStateForm));
Their code (Works with InitialValues) Taken from here
InitializeFromStateForm = reduxForm({
form: 'initializeFromState', // a unique identifier for this form
})(InitializeFromStateForm);
// You have to connect() to any reducers that you wish to connect to yourself
InitializeFromStateForm = connect(
state => ({
initialValues: state.account.data, // pull initial values from account reducer
}),
{ load: loadAccount }, // bind account loading action creator
)(InitializeFromStateForm);
export default InitializeFromStateForm;
I changed their code for connect() and reduxForm with mine, interestingly the initialValues stopped working, now my question is are both the code different? if different what is wrong in my code?
Thanks.
Yeah there is a slight difference, you are wrapping the component with connect and then with ReduxForm, However it should be the other way round
Change your code to
export default connect(mapStateToProps,{load: loadAccount})(reduxForm({
form:'initializeFromState'
})(InitializeFromStateForm));
and it should work
The difference is in the order in which the react-redux connect HoC, and the redux-form HoC wrap each other.
In your code redux-form wraps the connect HoC, and the initialValues are not passed to the form, but to the internal component. The form is initialized with the values, and the internal component (yours) ignores them.
Props flow: redux-form -> connect - initialValues -> component
In their code connect wraps redux-form, and the initialValues are passed as to the redux-form HoC (the form). The form is initialized with the values.
Props flow: connect - initialValues -> redux-form -> component

React-intl, Redux-Form combine and raise warnings

I try to use React and Redux for now. and I'm now making i18n App so I have to use React-intl package in this project.
Now My login form is like this. and import is like below.
import React, {
Component
} from 'react';
import {
reduxForm
} from 'redux-form';
import {
injectIntl
} from 'react-intl';
now, I would like to use intl.formatMessage so I have to use injectIntl into this Component like
export default injectIntl(LoginForm);
and now I don't get any errors.
Also, I would like to use Redux-form into my login name form and e-mail form in it. like
export default reduxForm({
form: 'loginForm',
fields: ['name', 'password']
})(LoginForm);
I need the both, so I combine them into 1 export, like
export default reduxForm({
form: 'entrance',
fields: ['name', 'password']
})(injectIntl(LoginForm));
or
export default injectIntl(reduxForm({
form: 'entrance',
fields: ['name', 'password']
})(LoginForm));
But both type of above I've got a warning
warning.js:44Warning: Unknown props `initialValue`, `autofill`, `onUpdate`, `valid`, `invalid`, `dirty`, `pristine`, `active`, `touched`, `visited`, `autofilled` on <input> tag. Remove these props from the element. For details, see "abbred"
in input (created by TextField)
in div (created by TextField)
in TextField (created by Entrance)
in div (created by CardText)
...
I can use both of them with this warning, but how do I would like to get rid of this warning.
How should I do?
You will need to update Redux-Form to v6 to overcome these errors (assuming you're running React v15.2.0+). Run:
npm install --save redux-form#6.0.0-rc.3
You will also need to change how you're using Redux-Form due to major changes in its infrastructure. Take a look at the documentation here:
http://redux-form.com/6.0.0-rc.3/docs/MigrationGuide.md/
Also, this tutorial has code samples that demonstrate how a Redux-Form v6 setup should look: http://davidmeents.com/create-redux-form-validation-initialized-values/

Categories