Small React app with multiple components

Question

One of my first attempt in React therefore I am sure there will bel plenty of non-sense of coding that it the main reason to put here for learning more from the review by intelligent users

Is the coding style is ideal with ES6 & new version of React ?

In pages using the technologies es6, babel..etc

Demo: http://plnkr.co/edit/5M7sCF9B3dQJZ06SbMfT

app.js

import React from 'react';
import {render} from 'react-dom';

import { Filter } from './components/Filter';
import { Properties } from './components/Properties';

import data from './data';

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            searchText: ''
        };
    }
    searchUpdate(value){
        this.setState({
            searchText: value
        });
    }

    render() {
        return (
            <div className="app-wrap">
                <Header/>
                <Filter
                    searchText={this.state.searchText}
                    searchUpdate={this.searchUpdate.bind(this)}
                />
                <Properties
                    data={data}
                    searchText={this.state.searchText}
                />
                <footer>
                    <div className="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
                </footer>
            </div>
        );
    }
}

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

Here is the place in the web app user can search particular item for the result

Filter.js

import React from 'react';

export class Filter extends React.Component {

    searchUpdate(){
        const val = this.searchValue.value;
        this.props.searchUpdate(val);
    }

    render () {
        return(
            <nav className="filter">
                <div className="container">
                    <form>
                        <input
                            type="search"
                            className="filter-input"
                            placeholder="Search property..."
                            ref={ (value) => this.searchValue = value}
                            onChange={this.searchUpdate.bind(this)}
                        />
                    </form>
                </div>
            </nav>
        );
    }
}

Here the search the JSON result show based on the search

Properties.js

import React from 'react';

export class Properties extends React.Component {
    render () {
        const { data, searchText } = this.props;
        const offersList = data
            .filter(offerDetail => {
                return offerDetail.city.toLowerCase().indexOf(searchText.toLowerCase()) >= 0;
            })
            .map(offerDetail => {
                return (
                    <div className="offer" key={offerDetail.id}>
                        <h2 className="offer-title">{offerDetail.title}</h2>
                        <p className="offer-location"><i className="location-icon"></i> {offerDetail.city}</p>
                    </div>
                );
            });
        return (
            <main>
                <div className="container">
                    { offersList.length ? offersList : <h3 className='no-result'>Oops, we currently do not have any places that match your search.</h3>}
                </div>
            </main>
        );
    }
}

This dummy data is just few however actual data is really heavy with plenty of details. Here just showing few of them for review purpose. data.js

export default [
  {
    "id": "7XHFQ63X",
    "title": "Lovely Apartment in Prenzlauer Berg",
    "city": "London"
  },
  {
    "id": "27DCP7BP",
    "title": "Elegant Flat near Alfama",
    "city": "Manchester"
  },
  {
    "id": "B4ECHV3B",
    "title": "Chic & Charming Lisboa - The most perfect view ",
    "city": "London"
  },
]

Answer 1

So, what you have to keep in mind: 1. Single responsibility principle Your component might RENDER or CALCULATE. OR, not AND. Extract all logic from Properties.js. This also enables you to test rendering of data, and filtering of data as separate entities.

2. Dependency injection You have concreted data inside App component. As result, you cannot test your Application with different data, or just have to provide big-and-full data each time. Pass data as prop to the App.

 render(<App data={data} />, window.document.getElementById('myapp'));

3. Memory&CPU wasting. You should not do any allocations in render method.
   • no logic inside render.
   • no bindings inside render.
   • and so on Usually you can bind callbacks in constructor, or use the more modern syntax:

    class App extends React.Component {
       ....
        searchUpdate = (value) => { // <-- arrow function will `keep` this by hidden magic (babel :P )
            this.setState({
                searchText: value
            });
        }
       ...
    }

4. Know DOM/React API. You can remove searchUpdate, and you should remove ref. Use API.

<input
       type="search"
       className="filter-input"
       placeholder="Search property..."
       onChange={this.props.searchUpdate} // - just pass a prop
    />

    searchUpdate(event){
            this.setState({
                searchText: event.target.value // get value from onChange event
            });
        }