CODEWITHSUNDEEP
javascriptreactjswebpackcomponents
Zocker3333
Zocker3333

Reputation: 117

React: Make components external

I've been trying to get into React and therefore read the official guides, however, I'm not sure how to put components into their own files to reuse them across files.

I've made a very basic React Component which holds an input tag and some configuration with it. I would like to make this input tag a standalone component in its own file. How do I achieve this?

I use Webpack with this configuration:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['react-hot', 'babel'],
      include: path.join(__dirname, 'src')
    }]
  }
};

This is the React code:

import React, { Component } from 'react';

export default React.createClass({
  getInitialState: function() {
    return {text: ''};
  },
  handleChange: function(e) {
    this.setState({text: e.target.value})
  },
  render() {
    return (
      <div>
        <h1>What's your name?</h1>
        <input 
            type="text" 
            value={this.state.text} 
            onChange={this.handleChange}
        />
        <h2>Hallo, {this.state.text}</h2>
      </div>
    );
  }
});

Edit: I forgot the index.js:

import React from 'react';
import { render } from 'react-dom';
import App from './Components/App';

render(<App />, document.getElementById('root'));

Thanks.

Upvotes: 1

Views: 4793

Answers (1)

erichardson30
erichardson30

Reputation: 5044

You will want to create an input component and pass your state and handle change function as props to the component.

Input Component : 

import React, {Component} from 'react';

var Input = React.createClass({
  handleChange: function(e) {
    this.props.handleChange(e.target.value);
  }

  render() {
    return (
      <input
        type="text"
        value={this.props.text}
        onChange={this.handleChange} />
    )
  }
});
export default Input;

Your current component (with the input component added in): 

import React, { Component } from 'react';
import Input from './path_to_inputComponent';

export default React.createClass({
  getInitialState: function() {
    return {text: ''};
  },
  handleChange: function(text) {
    this.setState({text: text})
  },
  render() {
    return (
      <div>
        <h1>What's your name?</h1>
        <Input text={this.state.text} handleChange={this.handleChange} />
        <h2>Hallo, {this.state.text}</h2>
      </div>
    );
  }
});

So what will happen is, this.state.text will be passed as the text prop to Input which will set the value of the input. This will allow the input component to be used in multiple places and have a different value in each place that it is used. Also, when the onChange event is fired from the input, it will call the function that handleChange function that is passed to it as a prop. Therefore, it will call the function in the parent component and the state will be updated in the parent component.

Upvotes: 2

Related Questions