Passing down props in react rails and setting refs

Question

I am trying to build a simple rails backend and react frontend blog app. Everything was going fine until I get to edit action when I was trying to edit a post. I can not set propTypes and using refs in form. I am getting the following error

[![see the below image link to see the error details][1]][1]


[1]: https://i.stack.imgur.com/VvdS0.png

I am using react-rails gem

here is my controller edit and update actions

def edit
 @post = Post.find(params[:id])
end

def update
 if @post.update(post_params)
  render json: { post: @post }
else
 render :edit
end

end

here edit.html.erb

<%= react_component 'EditPost', { post: @post.as_json(only: [:id, :title, :body]) } %>

and below is the EditPost component which is located in assets/javascripts/components

class EditPost extends React.Component {

  constructor(props) {
    super(props)

  }

  render () {

    return (
      <div className="row">
        <div className="col-md-6 col-md-offset-3">
          <h3>Post</h3>
          <form>
            <div className="form-group">
              <label htmlFor="title">Title</label>
              <input type="text"
                     className="form-control"
                     placeholder="title"
                     ref="title" /> // here I can't set ref
            </div> <br />
            <div className="form-group">
              <label htmlFor="body">Body</label>
              <input type="text"
                     className="form-control"
                     placeholder="body"
                     ref="body" /> // here I can't set ref
            </div> <br />
          </form>
        </div>
      </div>
    )
  }
}
// if I uncomment below code I will get (Uncaught TypeError: can not read property 'string' of undefined
// EditPost.propTypes = {
//   title: React.PropTypes.string.isRequired,
//   body: React.PropTypes.string.isRequired
// }

Here is my github repo ( https://github.com/Hano1388/react-rails-blog ) feel free to clone it to see the error I am getting. Thanks, I appreciate your help

score 0 · Answer 1 · answered Dec 17 '17 at 10:48

0

React 16 no longer packages propTypes. Try using:

import PropTypes from 'prop-types'

And change to PropTypes instead of React.PropTypes

title: PropTypes.string.isRequired,

answered Dec 17 '17 at 10:48

ᴘᴀɴᴀʏɪᴏᴛɪs

7,169
9
50
81

I tried this before I was getting another error Uncaught ReferenceError: require is not defined Uncaught Error: Cannot find component: 'EditPost'. Make sure your component is available to render. – Hindreen Dec 17 '17 at 10:52
the thing is, title is undefined otherwise I might pass the error but, title is undefined – Hindreen Dec 17 '17 at 10:59

Passing down props in react rails and setting refs

1 Answers1