Как получить доступ к дочернему jsx элементу?

Question

[Rapen]

Это недоделанный код от todo листа. Есть функциональный компонент jsxElems, который генерирует div элементы, как получить доступ к input элементу в каждом div элементах?

const arr = [
    {
        id:'1',
        value:"Learn React"
    },
    {
        id:'2',
        value: 'Learn Redux'
    }
];
function jsxElems(arr){ 
				return ( 
                    <div>
				     {arr.map((n,i) => {
							return (<div className="listElem" key={i}>{n.value}
							<input type="checkbox"/>
							</div>);
						})}
				</div>);
	} 
class App extends React.Component { 
 	constructor(props){
		super(props);
		this.state = { 
			jsxElems: jsxElems(arr)
			}
		}			
	handleAdd =(e) =>{
		let _valOfInput = document.querySelector(".val").value;
        if(!_valOfInput){
            return;
        }
			arr.push({
				value: _valOfInput 
			});
		this.setState({
           jsxElems:jsxElems(arr)
        })
	}
	handleRemove = (e) =>{
		let list = jsxElems(arr);
        for(let i = 0;list.length;i++){
            list[i]
        }
	}
	render() { 
		return (	
			<div className="todoMain">	
			<span className="todo">TODO</span>
			<input className='val' placeholder="Add a Task..." type="text"/>
			<input  type="button" value='Add' onClick={this.handleAdd}/>
			<input type="button" value='Clear' onClick={this.handleRemove}/>
			{this.state.jsxElems}
			</div> 
			);	
	}
}
ReactDOM.render(<App />,document.getElementById('root'))

Answer 1

[Vlad Feninets]

через рефы

contructor() {
   super()

   this.refsList = []
 }

 // ....

 {arr.map((n,i) => {
  return (<div className="listElem" key={i}>{n.value}
  <input type="checkbox" ref={ref => this.refsList.push({ value: n.value, ref })}/>
  </div>);
})}

Comments

[Rapen]

А что это за фигурные скобки? имелось в виду что вставляется в jsx?

[Rapen]

Я разобрался, спасибо