I am using React.js and JQuery to build out a landing page. I want to have a button disappear after some data is submitted.
I wanted to know if there was a better way to delete the html element (button) with React.js, as opposed to just using the JQuery command $('button').remove()? Thank you!
In React.js, there is a different approach than in jQuery.
The easiest option is to set a variable to the state, which indicates whether the button should appear or not. And after some action (submitting some data in your case), this variable changes, which will automatically "remove" the button.
Example:
import React from 'react';
class Page extends React.Component {
constructor() {
super();
this.state = {
showButton: true
};
}
disappearButton() {
this.setState({
showButton: false
});
}
render() {
return (
<div>
{this.state.showButton && (<button>Here is the button</button>)}
<span onClick={this.disappearButton.bind(this)}>Make the button disappear</span>
</div>
)
}
}
Sure there is. You could set a state when you submit your form.
You would have a initial state of this.state.isButtonRemoved = false and you'd call this.setState({isButtonRemoved: true}) inside your submit handler.
In your button JSX you would do a if statement before rendering. Since React will re-render after any change to State, it would disappear after clicking submit.
render: function() {
var button = '';
if(!this.state.isButtonRemoved) {
button = (<button type="submit">I will disappear after clicking</button>);
}
return(
{button}
);
}
I wrote ES5 because i don't know if you're already using ES6 (you should!)
You can hide/delete element via React.useRef, you need to initialize tha useRef, like this:
const wrapperRef = useRef(null);
then bind this wrapperRef to your element:
<section className="class" id="com" ref={wrapperRef}>
when this element renders, you will have your wrapperRef object with all html attributes of that component, you can delete/manipulate anything accordingly!!
Happy Coding!
