instruction.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import ImageUpload from '../bundles/image_upload'
import { generateFormName } from '../helpers/form-helpers'

export default class Instruction extends React.Component{

	constructor(props){
		super(props)

		this.generateIdField = this.generateIdField.bind(this)
	}

	static defaultProps = {
		image: "",
		message: ""
	}

	render(){
		return(
			<div className="instruction">
				<div className="instruction__controls">
					<button type="button" 
							className="instruction__delete" 
							onClick={this.props.onDelete} >x</button>
					<button type="button" 
							className="instruction__up"
							onClick={this.props.onMoveUp}>^</button>
					<button type="button"
							className="instruction__down"   
							onClick={this.props.onMoveDown}>v</button>
				</div>
				<div className="instruction__image">
					<ImageUpload image={this.props.image}
								 name={generateFormName("exercise", "instructions_attributes", this.props.index, "image_attributes", "file" )} />
				</div>

				<textarea className="instruction__textarea"
						  placeholder="Type instruction here..."
						  name={generateFormName("exercise", "instructions_attributes", this.props.index, "text" )}
						  defaultValue={this.props.text} />

				{ this.generateIdField() }

				<input type="hidden"
					   name={generateFormName("exercise", "instructions_attributes", this.props.index, "position")}
				       value={this.props.index} />
			</div>	
		)
	}

	generateIdField(){
		if( this.props.id ){
			return( 
				<input type="hidden" 
				   	   value={this.props.id} 
				   	   name={generateFormName("exercise", "instructions_attributes", this.props.index, "id" ) } />
			)			
		}
	}
}

InstructionList.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import Instruction from '../components/instruction'

export default class InstructionList extends React.Component{
	
	constructor(props){
		super(props)

		this.state = {
			instructions: this.props.instructions
		}

		this.addNewInstruction = this.addNewInstruction.bind(this)
		this.deleteInstruction = this.deleteInstruction.bind(this)
		this.moveInstructionUp = this.moveInstructionUp.bind(this)
		this.moveInstructionDown = this.moveInstructionDown.bind(this)
	}

	render(){
		return(
			<div className="instruction-list">
				{this.state.instructions.map(function(instruction, i){
					return(
						<Instruction id={instruction.id}
									 key={i}
									 index={i}
									 image={ instruction.hash_image_urls ? instruction.hash_image_urls.medium : undefined }
									 text={instruction.text}
									 position={instruction.position}
									 showFormDetails={this.props.showFormDetails}
									 onDelete={this.deleteInstruction.bind(this, i)}
									 onMoveUp={this.moveInstructionUp.bind(this, i)}
									 onMoveDown={this.moveInstructionDown.bind(this, i)} />
					)
				}, this)}
				<div className="instruction-list__new"
					 onClick={this.addNewInstruction} >
					<i className="instruction-list__new-icon fa fa-plus-circle"></i>
				</div>
			</div>
		)
	}

	addNewInstruction(){
		this.setState({
			instructions: this.state.instructions.concat([{}])
		})
	}

	deleteInstruction( i ){
		let instructions = this.state.instructions.slice()
		instructions.splice(i, 1)
		
		this.setState({
			instructions
		})
	}

	moveInstructionUp( i ){
		console.log("moving up")
		if( i > 0 ){
			let instructions = this.state.instructions.slice()
			const instruction = instructions[i]
			instructions[i] = instructions[i - 1]
			instructions[i - 1] = instruction
			this.setState({
				instructions
			})
		}
	}

	moveInstructionDown( i ){
		console.log("moving down")
		if( i < this.state.instructions.length - 1 ){
			let instructions = this.state.instructions.slice()
			const instruction = instructions[i]
			instructions[i] = instructions[i + 1]
			instructions[i + 1] = instruction
			this.setState({
				instructions
			})
		}
	}
}