I was working on a project which is a clone of google notepad, which would be Google Keep , and I am doing it with ReactJSand Sass.
Basically it is a page where there is a form, inside a component Form.js, composed of one <input>that is where the title is written, one <textarea>where I write the text, a button that when pressed publishes a component called Note.jswhich would be the note.
My problem is that in each note there is a series of options and among them is the possibility of styling only the text but they don't work as they should because the idea is if for example I press the bold button the text is put in negritabut when I press it again to deactivate the negritadoes not do it and the same happens with the other two buttons that are used to give a subrayadoand put in cursivathe text.
From already thank you very much for your time.
//COMPONENTE NOTE.JS
import React, { Component } from 'react'
class Note extends Component {
constructor(){
super()
this.textStyle = React.createRef()
}
state= {
bold: false,
value: '',
underline: false,
italic: false
}
handleChange = (event) => {
const textRef = this.textStyle.current.style
const targetedEvent = event.target
if (targetedEvent.name === "fonts") {
this.setState({value: targetedEvent.value});
textRef.fontFamily = this.state.value
}
else {
//ACA ESTA MI PRIMER PROBLEMA
this.setState(prevState => {
let eventState = targetedEvent.ariaLabel === "bold" ? prevState.bold
:targetedEvent.ariaLabel === "underline" ? prevState.underline
: prevState.italic
return({ [targetedEvent.ariaLabel]: !eventState }) //AQUI ESTA EL PROBLEMA
})
this.state.bold ? textRef.fontWeight = "bold" : textRef.fontWeight = "none"
this.state.underline ? textRef.textDecoration = "underline" : textRef.textDecoration = "none"
this.state.italic ? textRef.fontStyle = "italic" : textRef.fontStyle = "none"
}
}
deleteNote = (event) => {
let oldNote = event.target.parentNode.parentNode
let newList = JSON.parse(localStorage.getItem('noteList'))
let index = newList.findIndex(el => el.text === this.props.text)
oldNote.remove()
newList.splice(index, 1)
localStorage.setItem('noteList', JSON.stringify(newList))
}
render() {
return(
<div className= "note" key= {this.props.id}>
<i className= "fas fa-thumbtack"></i>
<h2 className= "note-title">{this.props.title}</h2>
<p className= "note-text" ref= {this.textStyle}>{this.props.text}</p>
<div className= "option-bar">
<select className= "fonts" name="fonts" value={this.state.value} onChange={this.handleChange}>
<option value="montserrat">Montserrat</option>
<option value="arial">Arial</option>
<option value="roboto">Roboto</option>
<option value="calibri">Calibri</option>
</select>
<i aria-label= "bold" className="fas fa-bold" onClick={this.handleChange}></i>
<i aria-label= "underline" className="fas fa-underline" onClick={this.handleChange}></i>
<i aria-label= "italic" className="fas fa-italic" onClick={this.handleChange}></i>
<i className="fas fa-trash-alt" onClick={this.deleteNote}></i>
</div>
</div>
)
}
}
export default Note
