Toggle element isHidden True/False with React

Question

I have a problem with this code, my Toggle button doesn't display the Child element but gives me a full blank page Here is the code

class App extends React.Component {
    constructor(props, context) {
            super(props, context);
            this.state = {items: [] , isHidden: true};
            this.toggleHidden = this.toggleHidden.bind(this);
    }

componentDidMount() {
        fetch("/customers") 
            .then(result=>result.json())
            .then(items=>this.setState({items}));
}

    toggleHidden () {

        this.setState({
          isHidden: !this.state.isHidden
        });

      }


    render() {

        return (
      <div id='customerDetails'>
      {this.state.items.map(item=><customerDetail>
            <div id={item._id} >
              <button onClick={this.toggleHidden} data-arg1={item._id} value='U'/>
              {item.cost} 
              {!this.state.isHidden && <Child >
                  <div className='modal'>
                  <form onSubmit={this._handleUpdate}>
                  <input type='text' id='cost' name='cost'/>
                  <input type='hidden' id="_id" name='_id' value=item.id />
                  <input type='submit' value='Update'/>
                </form>
                </div>
                  </Child>
              }
              </div>
        </customerDetail>)}

        </div>
        );
      }

}

Any idea , i do not know if it's coming from the fact all that happens in an iteration I also tried this standalone source code from StackOverflow React toggle component that should work, and it does not work....blank page

Any idea

Thanks

Can you post the code for customerDetail and Child component — GSSwain, Mar 04 '18 at 09:46
I have no additional code, all is in my code above, perhaps there is a problem with this. — Laurent Bois, Mar 04 '18 at 09:48

score 0 · Answer 1 · answered Mar 04 '18 at 09:52

0

Firstly you need fix errors in the code. Change line <input type='hidden' id="_id" name='_id' value=item.id /> to <input type='hidden' id="_id" name='_id' value={item.id} />

answered Mar 04 '18 at 09:52

Oleksii Lyhun

113
7

score 0 · Answer 2 · answered Mar 04 '18 at 09:55

i just tried this in my parent component render function:

<button onClick={this.toggleHidden} value='U'/>
              {item.cost} 
              {!this.state.isHidden && <Child />}

and on the bottom of the code i add a Child class:

class Child extends React.Component {
    render() {

        return (    
                  <div className='modal'>
                  <form >
                  <input type='text' id='cost' name='cost'/>
                  <input type='hidden' id="_id" name='_id' />
                  <input type='submit' value='Update'/>
                  </form>
                  </div>           
        )             
    }
}

But i have stil a blank page when toggle

score 0 · Answer 3 · edited Feb 07 '19 at 23:56

I made my code work, here it is : Remove Child component at the bottom of the page Add a function CHild at the beginning :

function Child(props) {
  return (
    <div className='modal'>
      <form onSubmit={props.onClick}>
        <input type='text' id='cost' name='cost'/>
        <input type='hidden' id="_id" name='_id' value={props.value} />
        <input type='submit' value='Update'/>
      </form>
    </div>  
  );
}

Added the function renderChild in my parent component :

renderChild(i) {
  return (
    <Child
      value={i}
      onClick={() => this.props.onClick(i)}
    />
  );
}

Finally in the render of my parent component , replace the line :

{!this.state.isHidden && <Child/>}

by

{!this.state.isHidden && this.renderChild(item._id)}

Now my toggle function works

Toggle element isHidden True/False with React

3 Answers3