ReactJS: JSX Patterns for New React Developers

I’ve been working with ReactJS for a while now and here are a few things I’ve known that makes it easier for new ReactJS developers to work with ReactJS.

1. Lists

  render() {
    const { taskItems } = this.props;
    return taskItems.map((taskItem) => {
      return (
        <div key={taskItem.id}>
          <TaskItem
            taskItem={taskItem}/>
        </div>
      );
    });
  }

2. Shortcut validation and render

render() {
  {hasContent(taskItems) && <TaskItemsModal />
}

3. Ternary conditions

render() {
  {hasContent(taskItems)
    ? <TaskItemsModal
        showModal={this.state.showModal}
        onHide={this.closeModal}
        taskItems={taskItems} />
    : ""}
}

4. Transferring props

<Parent value="honesty" />

class Parent extends React.Component {
  render () {
    return <Child {...this.props} />
  }
}

5. Managing States

Initializing state

constructor(props) {
  super(props)
  this.state = {
    name: "Eric"
  }
}

Setting state

this.setState({ name: 'Nick' })

Using the state

render () {
  const { name } = this.state;
}

Default State

class People extends React.Component {
  constructor (props) {
    super(props)
    this.state = { loading: false }
  }
}

See: ReactJS States

6. ReactJS synthetic events

class UserForm extends React.Component {
  constructor() {
    this.onChange = this.onChange.bind(this);
    this.state = {
      value: ''
    }
  }

  onChange (event) {
    this.setState({ value: event.target.value })
  }

  render () {
    <input type="text"
        value={this.state.value}
        onChange={this.onChange} />
  }
}

Reference: ReactJS Events

 ActiveModel::ForbiddenAttributesError in ActiveAdmin

Active Admin is one of the most famous Rails gems built to create instant administration pages. Active Admin is a highly recommended gem. I have known a lot of production-ready sites that are using this particular gem.

There are a few things you need to learn while working with Active Admin. Aside from your typical Rails application, you will also have to learn Active Admin DSL.

Here’s a problem often encountered by Ruby on Rails developers working with Active Admin.

ActiveModel::ForbiddenAttributesError

This particular error informs us that strong parameters is being used and you will need to define the parameters your form is submitting. Here’s the particular fix:

ActiveAdmin.register Topic, as: "News" do
  # Add the following
  permit_params :event_date, :title, :body
end

You will need to replace event_date, title and body with your parameters.

and voila! fixed!

Screen shot 2018 02 13 at 9.55.16 pm

 How to center text in HTML

HTML is considered the language of the internet. It is primarily used for creating web pages that is easily understood by browsers. CSS are files used to format web pages.

We are now going to use CSS to format our text.

Deprecated way

This is the old way of doing this. This method has been deprecated in favor of the recommended way below:

<center>Your text</center>

Recommended way

The recommended way is to use the rule:

text-align: center;

Screen shot 2018 01 31 at 11.58.02 pm

 Add Index on Rails Active Record

Indexes are copies of columns of data from a database table. It makes is easily searchable and thus making it fast and efficient. In Rails an index can easily be adding via migrations with:

class AddIndexToTable < ActiveRecord::Migration
  def change
    add_index :tables, :column_id
  end
end

Unique

We can add a unique option to make the index unique:

class AddIndexToTable < ActiveRecord::Migration
  def change
    add_index :tables, :column_id, unique: true
  end
end

This, however, would not allow duplicate value for the same column.

Unique with Combination

We sometimes have join tables wherein we need to scope out combinations of ids. With this, we can add an index that references both columns:

class AddIndexToJoinTable < ActiveRecord::Migration
  def change
    add_index :join_tabes, [:column_id, :column_2_id], unique: true
  end
end

This will make sure that combinations of column_id AND column_2_id are all the time.