Как создать список в реакции с помощью сокращения?

Question

Я пытаюсь составить список, используя redux. Как реагируют на компонент. Поэтому я хочу сделать список отдельным компонентом.

Когда пользователь заполняет поле ввода и нажимает кнопку add, он должен добавить элемент списка. Но в настоящее время он не показывает элемент списка.

Вот мой код:

https://plnkr.co/edit/eCZSo6Rl5odN1hTb6BCW?p=preview

Я сейчас делаю это так:

<r names ={this.props.names}/> 


const r = (props) => { 
    alert('---') 
    return (
     <li> 
      <span>hiii</span> 
     </li> 
    ); 
}; 

Когда this.props.names изменяет он должен сгореть функцию визуализации. Но он не вызывает функцию рендеринга.

Answer 1

Ваши компоненты должны быть капиталом. r должно быть R через.

Обновлено plnkr: https://plnkr.co/edit/ENpx2s7JdW0AZUYtzKOj?p=preview

Это происходит потому, что React лечит нижние элементы регистра обозревателя самородные элементов (Div, р, пролет и т.д.) и элементы капитала в качестве элементов уровня приложения.

Answer 2

Реакция Компонент должен начинаться с UpperCase букв. Изменение, что и он будет решать ваши проблемы

render() { 
    const data =[{"name":"test1"},{"name":"test2"}]; 
    var listItems = this.props.names.map(function(d, idx){ 
     return (<R key={idx}></R>) 
    }) 
    return (
     <div> 
     <input type="text" onChange ={this.changeEv}/> 
     <button onClick={this.addName}>add</button> 
     {listItems} 
     </div> 
    ); 
    } 
} 
const R = (props) => { 
    alert('---') 
    return (
     <li> 
      <span>hiii</span> 
     </li> 
    ); 
}; 

Plunkr