我想用 react js 创建一些关于在窗口中添加字符串的程序，但是我遇到了错误

Question

I am creating a program with React Js, where I need to write something in prompts and it needs to appear in window. Now I have created the function of adding prompts and pasting it in window, but it's giving an error. please help me if you can : )

export default class Clock extends React.Component {
   state = {items: ['Hakob', 'Arman']};

   Add(){
      const newitems = this.state.items.concat([prompt('a')])
      this.setState({items:newitems})
   }

 

   render(){
         return <div>
             <Clock2/> 
         </div>
   }
} 

class Clock2 extends React.Component {


   render(){
      return(
         <>
             <button onClick={this.Add}>click</button>
             
     


         <div> {this.state.items.map((e, i) => {
            return <div key = {e + i}> {e} </div>
         } )} </div>

         </>
      )
   }
}

Answer 1

you have not defined any state in class clock2 so, the line # 798 giving you an error for cannot read property of items as it is not defined in class

class Clock2 extends React.Components {
state = {
items : // 
}

}

and the second error is you are trying to return in the return function that is not correct if you want to map items you have to define map function in render

{
const items = this.state.items.map((e,i ) => {
// 
}
return (
<items/>
)

Answer 2

So let's write your code here.

export default class Clock extends React.Component {
   state = { items: ['Hakob', 'Aram']};

   Add() {
      const newItems = this.state.items.concat([prompt('a')])
      this.setState({items:newItems})
   }

   render() {
      return <div><Clock2/><div>
   }
}

class Clock2 extends React.Component {
   render() {
      return (
         <>
            <button onClick={this.Add}>Click</button>
            <div>{ this.state.items.map( (e,i) => {
               return <div key={ e + i}>{e}</div>
            })}
            </div>
         </>
      )
   }
}

You made a mistake, state are internals to component, as well as method.

This should work

export default class Clock extends React.Component {
   state = { items: ['Hakob', 'Aram']};

   Add() {
      const newItems = this.state.items.concat([prompt('a')])
      this.setState({items:newItems})
   }

   render() {
      return (
          <>
            <button onClick={this.Add}>Click</button>
            <div>{ this.state.items.map( (e,i) => {
               return <div key={ e + i}>{e}</div>
            })}
            </div>
         </>
      )
   }
}

Or you can pass values from top component to his child.

export default class Clock extends React.Component {
   state = { items: ['Hakob', 'Aram']};

   Add() {
      const newItems = this.state.items.concat([prompt('a')])
      this.setState({items:newItems})
   }

   render() {
      return (<div><Clock2 add={this.Add} values={this.state.items}/><div>)
   }
}

class Clock2 extends React.Component {
   render() {
      return (
         <>
            <button onClick={this.prop.add}>Click</button>
            <div>{ this.props.values.map( (e,i) => {
               return <div key={ e + i}>{e}</div>
            })}
            </div>
         </>
      )
   }
}