используя реквизит в HTML ID

Question

используя реквизиты для HTML id

Я создаю лист с React и MongoDB.Где Item.js из StockSheetContainer.js [Обертывания, Bonnets] имеют подэлемент в ItemContainer.js [6 ", 10", Preemie] и подгруппу ItemContainer с помощью пол.js (еще не сделано) [мальчики, девочка, нейтральная].Мне нужно .Я попробовал реквизит, но потерпел неудачу.

file: Item.js
import React, {Component} from 'react';
import PropTypes from 'prop-types';

import ItemContainer from './ItemContainer'; 

export default class Item extends React.Component {
 render() {
        let var_id = this.props.title.value + this.props.name.value;
        console.log(var_id);  // it supply NaN
        return ( 
            <div id="" style={{display: "flex"}}>                                             
                <p>
                    {this.props.name}                   
                    <input id='var_id' type="number" />      
            {/* id={this.props.title + this.props.item}
                    <input id= 'var_id' type="number" /> 
                    <input id= 'var_id' type="number" />
                </p>
            </div>
        ) }  }

---

 file: ItemContainer.js

    import React from 'react';
    import Item from './Item';
    import PropTypes from 'prop-types';

    export default class ItemContainer extends React.Component {
        render() {
            if (this.props.title === 'Wraps') {
                return (
                    <div>
                        <h3>{this.props.title}</h3>    
                        <Item title='' name="6 inch" />
                        <Item title='' name="8 inch"/>
                        <Item title='' name="10 inch"/>
                        <Item title='' name="12 inch"/>
                        <Item title='' name="Cocoon"/>
                    </div>
                )}
            else {
                return (
                    <div>
                        <h3>{this.props.title}</h3> 
                        <Item title='' name="Tiny"/>   
                        <Item title='' name="Preemie"/>
                        <Item title='' name="Micro"/>
                        <Item title='' name="New Born"/>
                    </div>
                ) } }  }

---

file: StockSheetContainer.js

import React from 'react';
import ItemContainer from './ItemContainer'; 

class StockSheetContainer extends React.Component{
    render(){
        return(
            <div>
      <NavBar user="Diane"/>
      <DonationInfo referenceNumber= "NC12" dateDonated= "June 4, 2019"            
seamstress="Jacky Mao" donor="John Doe"/>
      <ItemContainer title="Wraps"/>
      <ItemContainer title="Bonnets"/>
      <ItemContainer title="Blankets"/>
      <ItemContainer title="Dresses"/>
      <button className="btn btn-success">Submit</button>
      </div>
        ) } }
export default StockSheetContainer;

Я хочу где var_id = let var_id = this.props.title.value + this.props.name.value;