Add values from another react component

Question

I created a component. Code can be seen here: http://codepen.io/anon/pen/zZmyyd

class Add extends React.Component  {
  constructor () {
    super();
    this.state = {
      inItems: ["aaa", "bbb", "ccc", "ddd"]
    } 
     this.state.items= this.state.inItems;
  }


  add () {
        const currentItems = this.state.inItems,
            newVal = this.refs.inputVal.value;
        currentItems.push(newVal);
        this.setState({
            items: currentItems, 
            value: newVal 
        });
  }

  render () {
    return (
        <div>
        <input type="text"  ref="inputVal"/>
            <button type="button" onClick={this.add.bind(this)}>Add</button>
            <List items= {this.state.items} />
         </div>
     )
  }
}

class List extends React.Component {
    render () {
        return (
            <ul>
                {
                    this.props.items.map(function(item) {
                        return <li key={item}>{item}</li>
                    })
                }
            </ul>
        )
    }
}


ReactDOM.render(
  <Add />,
  document.getElementById('root')
);

How can I add value from Addnews component?

class Addnew extends React.Component {
    constructor () {
        super();
    }

    saveit () {
        const currentItems = this.state.inItems,
            newVal = this.refs.inputVal.value;
        currentItems.push(newVal);
        this.setState({
            items: currentItems, 
            value: newVal 
        });
    }

    render () {
        return <button type="button" onClick={this.saveit.bind(this)} ref="inputVal">Add Value from here</button>
    }
}

Can you add more explanation

Shubham Khatri
– Shubham Khatri

2017-03-29 09:56:47 +00:00
Commented Mar 29, 2017 at 9:56 — Shubham Khatri
– Shubham Khatri, Commented Mar 29, 2017 at 9:56
You can use redux or similar.

Brigand
– Brigand

2017-03-29 10:02:05 +00:00
Commented Mar 29, 2017 at 10:02 — Brigand
– Brigand, Commented Mar 29, 2017 at 10:02

Sumit R · Accepted Answer · 2017-03-29 10:23:46Z

1

You have to render the Addnew component in Add component.

And then pass the add function as props to Addnew Component:

render () {
    return (
        <div>
        <input type="text"  ref="inputVal"/>
            <button type="button" onClick={this.add.bind(this)}>Add</button>
        <List items= {this.state.items} />
        <Addnew add={this.add.bind(this)} />
     </div>
 )
}

And in Addnew component:

class Addnew extends React.Component {
    constructor () {
        super();
    }

    saveit () {
       this.props.add();
    }

    render () {
        return <button type="button" onClick={this.saveit.bind(this)} ref="inputVal">Add Value from here</button>
    }
}

here's the modified code: http://codepen.io/anon/pen/OpBdpV?editors=0010#0

answered Mar 29, 2017 at 10:23

Sumit R

1063 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add values from another react component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related