React Javascript - setState issue and copyToClipboard issue with scaleable button+p render

user_12221292 0
Viewed 42

Building a chat-site (automatic response) for work, and having difficulties setting state of button/paragraph couple in scaleable render.

ID is written in JSON, so non unique creation Active=, and value= also gotten from same JSON.

What I want to do: I want to be able to click button and copy to clipboard the text in paragraph with same ID.

CODE (relevant snippets):

    export default class MenuExamplePointing extends  Component  {
      state = { activeItem: 'Transfer list' } // functioning setState for MENU-select
      value = { activeItem: '1'}              // functioning setState for MENU-select
      valuetwo = { activeId: '1'}             // non-functioning setState for BUTTON/P

    Wtest(state){
      const { activeId } = this.valuetwo

    if (state.value === "1"){

    return(  
           <div className="contentHolder">
              {PostData.map((postDetail) => {
                 return  <div> 
                    <button 
                      value= {postDetail.value}
                      className="descriptive"
                      active={activeId === postDetail.value.toString()}
                      id={postDetail.value}
        //onClick={this.handleIdClick}
        //onClick={() => this.handleIdClick }
                      >
                         {postDetail.name}
                      </button>
                    <p 
                     active={activeId === postDetail.value}
                     id={postDetail.value}
                     value={postDetail.value}
                     className="insertText" >             
                     {postDetail.content}
                    </p>
                  </div>
                })}
          </div>   

     )
    }

      handleIdClick = (e, { value }) => {
         this.setState({ activeId: value })};

      handleItemClick = (e, { name, value }) => {
         this.setState({ activeItem: name, value })};

    render() {
        const { activeItem } = this.state

    return (  
      <div>

        <Menu pointing>
          <Menu.Item
            name='Transfer List'
            active={activeItem === 'Transfer List'}
            onClick={this.handleItemClick}
            value = "1"

          />
    ....

        <segment>
           <div>{this.Wtest(this.state)}</div>
        </segment>
setstate reactjs onclick javascript
1 Answers

By selecting currentTarget.value and removing id from button, i am able to grab value for each of the generated inputs and manipulate its innerHTML (copyToClipboard). So, even if I did not answer my question properly, I found a suitable and scaleable solution. For interested, here is the new code: 

  bar(e){
    var equals = e.currentTarget.value;
    document.getElementById(equals).innerHTML = "test";
  }

  Wtest(state){
  if (state.value === "1")
    return(  
       <div className="contentHolder">
          {PostData.map((postDetail) => {
            return  <div> 
          <button 
            value={postDetail.value.toString()}
            className="descriptive"
            onClick={this.bar}
          >{postDetail.name}
          </button>
          <p 
           id={postDetail.value}
           value={postDetail.value.toString()}
           className="insertText" >             
           {postDetail.content}
            </p>
            </div>
          })}  
      </div>   

  )
}
user_122212920
Related