Using react.js
The code below represents two input boxes with a submit button. Clicking on the submit button will print the information typed inside of the two input boxes.
You can also remove those messages by clicking the delete button.
The initial state already contains an invincible string message and that makes an unwanted delete button appear initially. How can I remove this initial delete button and make sure that they only appear once the first “submit” is sent.
Any help would be appreciated, thank you!
import ReactDOM from 'react-dom';
class AddMessage extends Component {
state = { title: null, body: null, }
handleChange = (e) => {
this.setState({ [e.target.id]: e.target.value })
}
handleSubmit = (e) => {
e.preventDefault();
this.props.addMessage(this.state);
}
render() {
return (<div>
<form onSubmit={this.handleSubmit}>
<label htmlFor="name">Title:</label>
<input type="text" id="title" onChange={this.handleChange} />
<label htmlFor="name">Body:</label>
<input type="text" id="body" onChange={this.handleChange} />
<button>Submit</button>
</form>
</div>)
}
}
const Messages = (props) => {
const { messages, deleteMessage } = props;
const messageList = messages.map(message => {
return (<div key={message.id}>
<h3>{message.title}</h3>
<h4>{message.body}</h4>
<button onClick={() => deleteMessage(message.id)}>Delete</button>
</div>)
})
return (<div>{messageList}</div>)
}
class TestTest extends Component {
state = {
messages: [{ title: "", body: "", id: 1 }]
}
addMessage = (message) => {
message.id = Math.random();
let messages = [...this.state.messages, message]
this.setState({ messages: messages })
}
deleteMessage = (id) => {
let messages = this.state.messages.filter(message => { return message.id !== id })
this.setState({ messages: messages })
}
render() {
return (
<div>
<Messages deleteMessage={this.deleteMessage} messages={this.state.messages} />
<AddMessage addMessage={this.addMessage} />
</div>
)
}
}
ReactDOM.render(<TestTest />, document.getElementById('root'));
export default TestTest```
