Adding Validation for React

app.jsx

// ...import react, Header
import store from './store';
import { Provider } from 'react-redux';

const App = () => {
  return (
    <Provider store={store}>
      <div className="container">
        <div className="starter-template">
          <Header />
          {/* ... */}
        </div>
      </div>
    </Provider>
  )
}

export default App;

NewTweet.jsx

import React from 'react';
import BackendService from '../../../services/backend';
import { Field, reduxForm } from 'redux-form';
import classnames from 'classnames';

export const required = value => value ? undefined : 'Field is required';

const renderField = ({
  input,
  placeholder,
  type,
  meta: {touched, error, warning}
}) => (

  <div>
    <textarea
      className={classnames("form-control", {"is-invalid": touched && error})}
      {...input} type={type} placeholder={placeholder}>
    </textarea>
    {touched && error &&
      <div className="invalid-feedback">
        {error}
      </div>
    }
  </div>
)

class CreateTweet extends React.Component {
  render() {
    const {handleSubmit, pristine, reset, submitting, valid} = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <Field
            type="text"
            name="content"
            placeholder={this.props.placeholder}
            component={renderField}
            validate={[required]}
          />
        </div>
        <button
          type="submit"
          className={classnames("btn","btn-primary")}
          disabled={!valid}>
          Submit
        </button>
      </form>
    )
  }
}

export default reduxForm({form: 'tweet'})(CreateTweet);

reducer.js

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';

const rootReducer = combineReducers({
  form: formReducer
});

export default rootReducer;

store.js

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger';
import reducer from './reducer';

const middleware = [ thunk ];
let composeEnhancers = (v) => (v);

if (process.env.NODE_ENV !== 'production') {
  middleware.push(createLogger())

  composeEnhancers =
    typeof window === 'object' &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
      }) : compose;
}

const store = createStore(
  reducer,
  composeEnhancers(
    applyMiddleware(...middleware)
  )
);

export default store;