React: Append Components to the DOM

Question

I am rendering components in React by mapping through a JSON object. I now want to append these components to the dom. How can I select each of these components and append them to the DOM?

All of the usual jQuery methods are not working.

 {dataobj.items.map( (instance) => {

        return (
          <div key={instance.title} className="new">
            <Event  time={parseInt(instance.start_time)}  title={instance.title} start_time={instance.start_time} location={instance.location} />
          </div>
        )


})}

---

import AltContainer from 'alt-container';
import React from 'react';
import { Link } from 'react-router';
import moment from 'moment';
import Event from './Event.jsx';
const classNames = require('classnames');
const ReactDOM = require('react-dom')


export default class Calendar extends React.Component {

  constructor(props) {
    super(props);



    this.state = {

    }
}

  componentDidMount() {
    ReactDOM.findDOMNode(this)
    console.log(this);
    $('#nine').append($('new'))
  }

  render() {

    var timeStamp = function() {
    var datafile = require("json!./data.json");

    {datafile.items.map(function(instance) {
      const timeElement= parseInt(instance.start_time);
      console.log(timeElement);
      return timeElement
    })}
}
    var dataobj = require("json!./data.json");


    return (
      <div className="calendar">
      <div className="amContainer">
        <div className="amSide">AM</div>
        <div className="linesContainer">
          <div className="hourBlock">
              <div id="nine" className="time">
              </div>
              <div className="halfHour">
                {moment().format('9:30')}
              </div>
          </div>
          <div className="hourBlock">
            <div className="time">
            {moment().format('10:00')}
            </div>
            <div className="halfHour">
              {moment().format('10:30')}
            </div>
          </div>
          <div className="hourBlock">
            <div className="time">
            {moment().format('11:00')}
            </div>
            <div className="halfHour">
              {moment().format('11:30')}
            </div>
          </div>
        </div>
      </div>

            {dataobj.items.map( (instance) => {


        return (
          <div key={instance.title} className="new">
            <Event  time={parseInt(instance.start_time)}  title={instance.title} start_time={instance.start_time} location={instance.location} />
          </div>
        )



})}


      </div>
    );
  }
}

Answer 1

First, you need to adjust your render method. You need to map over the dataObject, set it to a variable, in this case I call it objects and then use that in the jsx you already have as {objects} as a child like so:

render() {
// your render logic
var objects  =  dataobj.items.map( (instance) => {
      return (
          <div key={instance.title} className="new">
            <Event  
            time={parseInt(instance.start_time)}
            title={instance.title} 
            start_time={instance.start_time} 
            location={instance.location} 
            />
          </div>
        )

    return (
    <ExampleComponent> 
    // your main html should go here this is just a simple example
      {objects} 
    <ExampleComponent/>
    )
}