Wednesday 26 April 2017

What is the right way to call React component?

I encountered problem with react component. Basically, i use NPM integrated with Rails and called React component in my rails app.

I try to call react-file-base64 module in my code like below :

const FileBase64 = require('react-file-base64');

var MembersNew = React.createClass(
{
        render()
        {
                return(
                        <div>
                        <h5>ACCOUNT DETAILS</h5>
                        <hr/>
                        <p>Fill in your member account details below</p>
                        <b>Membership ID : </b>
                        <div className="row">
                        <div className="medium-6 columns">
            <FileBase64/> <------ Called component
                                 <label>Username*
                        <input ref="name" type="text"/>
                     </label>
                     <label>First Name*
                        <input ref="name" type="text"/>
                     </label>
                     <label>Last Name*
                        <input ref="name" type="text"/>
                     </label>
                     <label>Email Address*
                        <input ref="name" type="text"/>
                     </label>
             </div>
       </div>
       )

I got following error : enter image description here

Below is react-file-base64.js :

module.exports.React = require('react');
import ReactDOM from 'react-dom';

class FileBase64 extends React.Component {

  constructor() {
    super()
    this.state = {
      files: []
    }
    this.props = {
      multiple: false
    }
  }

  handleChange(e){

    // get the files
    let files = e.target.files;

    // Process each file
    var allFiles = []
    for (var i = 0; i < files.length; i++) {

      let file = files[i]

      // Make new FileReader
      let reader = new FileReader()

      // Convert the file to base64 text
      reader.readAsDataURL(file)

      // on reader load somthing...
      reader.onload = () => {

        // Make a fileInfo Object
        let fileInfo = {
          name: file.name,
          type: file.type,
          size: Math.round(file.size / 1000)+' kB',
          base64: reader.result,
          file: file
        }

        // Push it to the state
        allFiles.push(fileInfo)

        // If all files have been proceed
        if(allFiles.length == files.length){
          // Apply Callback function
          if(this.props.multiple) this.props.onDone(allFiles)
          else this.props.onDone(allFiles[0])
        }

      } // reader.onload

    } // for

  }

  render(){
    return (
      <div>
      <input
        type="file"
        onChange={ this.handleChange.bind(this) }
        multiple={ this.props.multiple } />
      </div>
    )
  }

}

export default FileBase64;

I think what i did was wrong. If there's anyone could guide me on how can i achieve this. I really appreciate that.



via Aizuddin Badry

No comments:

Post a Comment