freeCodeCamp/guide/arabic/certifications/front-end-libraries/react/use-state-to-toggle-an-element/index.md

title	localeTitle
Use State to Toggle an Element	استخدم الدولة لتبديل عنصر

استخدم الدولة لتبديل عنصر

• يمكنك تبديل عنصر عن طريق فحص وتغيير حالته.

تلميح 1:

• تذكر أن تربط this بمنشئ الطريقة.

this.toggleVisibility = this.toggleVisibility.bind(this);

تلميح 2:

• تذكر ، يمكنك استخدام وظيفة JavaScript للتحقق من حالة عنصر ما.

حل:

class MyComponent extends React.Component { constructor(props) { super(props); this.state = { visibility: false }; // change code below this line this.toggleVisibility = this.toggleVisibility.bind(this); // change code above this line } // change code below this line toggleVisibility() { if (this.state.visibility == true) { this.setState({ visibility: false });} else { this.setState({ visibility: true }) } } // change code above this line render() { if (this.state.visibility) { return ( <div> <button onClick={this.toggleVisibility}>Click Me</button> <h1>Now you see me!</h1> </div> ); } else { return ( <div> <button onClick={this.toggleVisibility}>Click Me</button> </div> ); } } };