I am new to `react js` and I am trying to **get input value and set it to another `html` element (p)**

And other thing is, I find it really hard to leran `react js` with all these complex syntaxes and things related to `react js`, are there any good tutorials that I can understand?

This is what I have been trying by researching all over the internet and I cannot go beyond this simple thing... Using `jquery` i could have done this so easily, and `react js` seems so complex to get the job done for some reason (maybe I am wrong). Anyway,

This is my `SelectTrainsAndTickets.jsx`

```
"use strict";
import React, { Component } from "react";
import { render } from "react-dom";
import "bootstrap/dist/css/bootstrap.css";

class SelectTrainsAndTickets extends Component {
  constructor(props) {
    super(props);
    this.state={
        noOfTickets: {document.getElementById('tickets')} //getting user input value
    };
  }

  showDetails() {
    this.setState({
        noOfTickets: 
    });
    console.log(this.state.noOfTickets);
  }

  render() {
    return (
      <React.Fragment>
        <div className="container">
          <div className="row">
            <div className="col-md-2" />
            <div className="col-md-4">
              <select id="train" name="train" className="form-control">
                <option value="select" disabled="disabled">
                  - Select Train -
                </option>
                <option value="1">Train A</option>
                <option value="2">Train B</option>
                <option value="3">Train C</option>
                <option value="4">Train D</option>
              </select>
            </div>
            <div className="col-md-4">
              <input id="tickets"
                className="form-control"
                type="number"
                placeholder="Number of tickets"
              />
            </div>

            <div className="col-md-2" />
          </div>
          <br />
          <div className="row">
            <div className="col-md-2" />
            <div className="col-md-4" />
            <div className="col-md-4 text-right">
              <button
                onClick={this.showDetails.bind(this)}
                type="button"
                className="btn btn-primary"
              >
                Buy Tickets
              </button>
            </div>
            <div className="col-md-2">
                <p>{this.state.noOfTickets}</p> //showing user input value
          </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default SelectTrainsAndTickets;

```

Can someone tell me how to do this?