bold() nie działa dla rend

Question

(Najeżdżając myszką na hover zmieniam state przez co renderuje sie ponownie component).

Chciałbym by zaznaczony text stawał się pogrubiony i by component zapamiętywał tą wartość 

Child
 

import { useState } from "react";

function Notes(props) {
	const [isHover, setIsHover] = useState(true);

	const handleMouseEnter = () => {
		setIsHover(1);
	};
	const handleMouseLeave = () => {
		setIsHover(0);
	};

	const styles = {
		colour: {
			color: isHover ? "white" : "grey",
			paddingLeft: 3 + "px",
		},
	};
	const noteElements = props.newNote.map((note, index) => {
		for (let i = 0; i < note.text.length; i++) {
			if (props.decoration()[i] === note.text[i]) {
				note.text[i].bold();
			}
		}

		return (
			<section key={note.id} className="m-4 ">
				<aside className="btn btn-dark " key={note.id} onClick={() => props.selected(note.id)}>
					Note {index + 1}
					{note.on && (
						<i key={"Icon" + note.id} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} style={styles.colour} onClick={() => props.delete(note.id)}>
						
						</i>
					)}
				</aside>

				{note.on && (
					<textarea
						className="position-absolute bottom-0 end-0 w-75 textarea-height m-1"
						key={"text" + note.id}
						name="text"
						value={note.text}
						onChange={(e) => {
							props.updateNote(note.id, e.target.value);
						}}
					/>
				)}
			</section>
		);
	});
	return noteElements;
}
export default Notes;

Parent 

function selectionText() {
		if (window.getSelection) return window.getSelection().toString();
	}

	return (
		<div className="h-100">
			{notes.length > 0 && (
				<div>
					<div className="card">
						<nav className="card-header shadow bg-white rounded">
							<button onClick={addNote} className="btn btn-outline-dark button-add-note-exists mt-3 ms-5">
								Add Note
							</button>
						
						</nav>
						<article>
							<section className="card-body position-relative">
								<h6 className="card-subtitle mb-2 text-muted">Make your own Notes</h6>
								<Notes newNote={notes} updateNote={updateNote} selected={currentNote} delete={deleteNote} decoration={selectionText} />
							</section>
						</article>
					</div>
				
			)

Cały kod 

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";
import Notes from "./Notes";
function Notepad() {
	const [notes, setNotes] = useState([]);

	function addNote() {
		const note = {
			id: new Date().getTime(),
			text: "# Text Goes Here",
			on: false,
		};
		if (notes.length < 8) {
			setNotes((prevNote) => [note, ...prevNote]);
		}
	}
	function updateNote(index, body) {
		setNotes((oldNotes) => {
			return oldNotes.map((note) => {
				if (note.id === index) {
					return { ...note, text: body };
				} else {
					return note;
				}
			});
		});
	}
	function currentNote(index) {
		setNotes((currentNotes) => {
			return currentNotes.map((note) => {
				return note.id === index ? { ...note, on: true } : { ...note, on: false };
			});
		});
	}
	function deleteNote(index) {
		setNotes((oldNotes) => {
			const newNotes = [];
			oldNotes.filter((note) => {
				if (note.id !== index) {
					newNotes.push(note);
				}
				return newNotes;
			});
		});
	}

	function selectionText() {
		if (window.getSelection) return window.getSelection().toString();
	}

	return (
		<div className="h-100">
			{notes.length > 0 ? (
				<div>
					<div className="card">
						<nav className="card-header shadow bg-white rounded">
							<button onClick={addNote} className="btn btn-outline-dark button-add-note-exists mt-3 ms-5">
								Add Note
							</button>
							<ul className="nav justify-content-end">
								<li className="nav-item m-1">
									<button>Bold</button>
								</li>
								<li className="nav-item m-1">
									<button>Color</button>
								</li>
							</ul>
						</nav>
						<article>
							<section className="card-body position-relative">
								<h6 className="card-subtitle mb-2 text-muted">Make your own Notes</h6>
								<Notes newNote={notes} updateNote={updateNote} selected={currentNote} delete={deleteNote} decoration={selectionText} />
							</section>
						</article>
					</div>
					<footer className="text-center p-3 footer position-absolute bottom-0 w-100">
						© 2020 Copyright
						<ProgressBar animated now={notes.length * 12.5} max={100} min={0} />
					</footer>
				</div>
			) : (
				<article className="h-100 d-flex align-items-center justify-content-center">
					<section className="d-flex flex-column">
						<label htmlFor="addNote" className="fs-1">
							There are no notes
						</label>
						<button id="addNote" onClick={addNote} className="btn btn-outline-primary">
							Add Note
						</button>
					</section>
				</article>
			)}
		</div>
	);
}

export default Notepad;

APP 

import React from "react";
import Notepad from "./components/Notepad";
function App() {
	return <Notepad />;
}

export default App;

 

Answer 1

Nie używaj funkcji bold, bo raz że jest zdeprecjonowana, a dwa, że zwróci string owinięty w <b>, tyle że React nie zinterpretuje tego jako HTML-owy <b> (chyba, że go zmusisz, co nie jest zalecane). Użyj tutaj font-weight w CSS - a w React nadaj klasę z tym stylem.

Comments

Próbowałem zrobić to przez

 style= {{fontWeight : props.decoration()[i] === note.text[i]? "bold : ""}}

ponieważ u góry jak jest spełniony warunek to odrazu FontWeight = true dla każdego nie dla pojedynczego 

ale bolduje wtedy cały tekst a nie tylko zaznaczone litery dlatego próbowałem rozwiązać to w taki sposób 

---

Zrobiłem coś takiego tylko nie wiem jak zrobić by przypisywało się to do tylko  litery która spełnia warunek  na stałe  

 

const styles = {
		colour: {
			color: isHover ? "white" : "grey",
			paddingLeft: 3 + "px",
		},
		bold: {
			fontWeight: "",
		},
	};

for (let i = 0; i < note.text.length; i++) {
			if (window.getSelection)
				if (window.getSelection().toString()[i] === note.text[i]) {
					styles.bold.fontWeight = "bold";
				} else {
					styles.bold.fontWeight = "normal";
				}
		}

style={styles.bold}

 

---

Zrób z tego stylu stan komponentu, to będzie się utrzymywał między renderami, chyba że go zaktualizujesz.

Żeby ostylować pojedyncze litery, musisz je owinąć w osobne tagi.