We Keep Coding

Parsing error: Unexpected token in JSX, trying to implement react-simple-typewriter

Creating a portfolio website as an exercise and trying out different animations.
Been going through this document, https://www.npmjs.com/package/react-simple-typewriter, and searched online as well to get a feel for what to use.
So far, I've tried it as a component prop, it worked, but the loop would not continue after the first animation.
Found a tip online to use as a hook instead, could not get it to even show, as well as throw the above mentioned error.
import "./intro.scss"
import React from 'react'
import { useTypewriter } from 'react-simple-typewriter';
export default function Intro() {
const MyComponent = () => {
const {text} = useTypewriter({
words: ['Hello', 'From', 'Typewriter', 'Hook!'],
loop: {3}
})
return (
<div className="intro" id="intro">
<div className="left">
<div className="imgContainer">
<img src="assets/stoned1.png" alt=""/>
</div>
</div>
<div className="right">
<div className="wrapper">
<h2>Hello, I'm</h2>
<h1>STONEd_NFT</h1>
<h3>Freelance </h3>
</div>
<a href="#portfolio">
<img src="assets/down.png" alt=""/>
</a>
</div>
</div>
)
}
}
When loaded on localhost:3000, this is what shows.:

You need to fix two things:
loop: {3} is not a valid syntax, should be only loop: 3
you need to pass text to your component
import React from "react";
import { useTypewriter } from "react-simple-typewriter";
export default function App() {
const { text } = useTypewriter({
words: ["Hello", " I'm STONEd_NFT", "Freelance"],
loop: 3
});
return (
<div className="intro" id="intro">
<div className="left">
<div className="imgContainer">
<img src="assets/stoned1.png" alt="" />
</div>
</div>
<div className="right">
<div className="wrapper">
<h1>{text}</h1>
</div>
<a href="#portfolio">
<img src="assets/down.png" alt="" />
</a>
</div>
</div>
);
}

try doing value: [3] or {value: 3}
the json object is not val

Combine two React files into one

I have two files that return html fragments. They are identical except for the image. The fact is that the server has different paths to the playlist image and the genre image.
props.items.images[0].url
and
props.items.icons[0].url
because of this, I had to distribute this code to two different files. How could I combine them into one?
const Playlist = props => {
const playListClick = e => {
props.onClick(e.target.title);
}
return (
<section id={props.selectedValue} className="column column__hidden" onClick={playListClick}>
<a className="link__decoration link__track hover__track link__one" href="#">
<div>
{props.items.map((item, idx) =>
<div className="container" key={idx + 1} title={item.id} >
<div className="content__track" title={item.id}>
<img className="img__tarck" title={item.id} src={item.images[0].url}/>
<div className="name" title={item.id}>{item.name}</div>
</div>
</div>)}
</div>
</a>
</section>
);
}
const Genre = props => {
const genreClick = e => {
props.onClick(e.target.title);
}
return (
<section id={props.selectedValue} className="column column__hidden" onClick={genreClick}>
<a className="link__decoration link__track hover__track link__one" href="#">
<div>
{props.items.map((item, idx) =>
<div className="container" key={idx + 1} title={item.id}>
<div className="content__track" title={item.id}>
<img className="img__tarck" title={item.id} src={item.icons[0].url}/>
<div className="name" title={item.id}>{item.name}</div>
</div>
</div>)}
</div>
</a>
</section>
);

You can use a Conditional (ternary) Operator to look if icons exists and if not fallback to using the image. Further assistance is hard due to not knowing the surrounding circumstances.
<img className="img__tarck" title={item.id} src={item.icons ? item.icons[0].url : item.images[0].url}/>

Add +1 to willWatch when <a> is clicked

Task: add +1 to willWatch when <a> is clicked.
I have an error when <a> is clicked, because MovieItem is not a component. I try to set class MovieItem... but I have a problem with moviesData
import React, { Component } from "react";
import { moviesData } from "../moviesData";
function MovieItem(props) {
let {info : { id, vote_count , video, vote_average, title, popularity, poster_path, original_language, original_title ,backdrop_path, adult, overview} } = props;
return (
<div className="col" id={id} style={{width: "18rem"}}>
<img className="card-img-top" src={'https://image.tmdb.org/t/p/w500' + poster_path}
alt="Card image cap"/>
<div className="card-body">
<h5 className="card-title">Оригинальное название: {original_title}</h5>
<h5 className="card-title">Название: {title}</h5>
<p className="card-text">{overview}</p>
<p className="card-text">Рейтинг: {vote_average}</p>
<p className="card-text">Популярность: {popularity}</p>
<p className="card-text">Наличие видео: {video}</p>
<p className="card-text">Оригинальный язык: {original_language}</p>
<p className="card-text">Возраст 18+: {adult}</p>
<p className="card-text">backdrop_path {backdrop_path}</p>
<p className="card-text">Голоса: {vote_count}</p>
<a
// onClick={this.props.counter}
href="#"
className="btn btn-primary">Will Watch
</a>
</div>
</div>
)
}
class App extends Component {
constructor(state) {
super(state);
this.state = {
willWatch: 0
};
this.counter = this.counter.bind(this)
}
counter(e) {
e.preventDefault();
this.state.willWatch = this.state.willWatch + 1
}
render() {
return (
<div className="container">
<div className="col-12">
<div className="row">
<div className="col-9">
<div className="row">
{
moviesData.map((props) => {
return <MovieItem info={props} counter={this.counter}/>
})
}
</div>
</div>
<div className="col-3 sidebar">
<div className="row">
<p> Хочу посмотреть, фильмов: {this.state.willWatch} </p>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default App;

First of all, you have to destructure count from props like so:
function MovieItem(props) {
let {info : { id, vote_count , video, vote_average, title, popularity, poster_path, original_language, original_title ,backdrop_path, adult, overview}, counter } = props;
return (
<div className="col" id={id} style={{width: "18rem"}}>
<img className="card-img-top" src={'https://image.tmdb.org/t/p/w500' + poster_path}
alt="Card image cap"/>
<div className="card-body">
<h5 className="card-title">Оригинальное название: {original_title}</h5>
<h5 className="card-title">Название: {title}</h5>
<p className="card-text">{overview}</p>
<p className="card-text">Рейтинг: {vote_average}</p>
<p className="card-text">Популярность: {popularity}</p>
<p className="card-text">Наличие видео: {video}</p>
<p className="card-text">Оригинальный язык: {original_language}</p>
<p className="card-text">Возраст 18+: {adult}</p>
<p className="card-text">backdrop_path {backdrop_path}</p>
<p className="card-text">Голоса: {vote_count}</p>
<a
onClick={counter}
href="#"
className="btn btn-primary">Will Watch
</a>
</div>
</div>
)
}
and one more note, you have to set state using setState function:
counter(e) {
e.preventDefault();
this.setState((prevState) => {
return {
willWatch: state.willWatch + 1
}
});
}

You should never mutate/set this.state value directly.
Or else React would not know whether state has been changed or not.
(Refer to this article for details).
So instead of updating willWatch directly,
counter(e) {
e.preventDefault();
this.state.willWatch = this.state.willWatch + 1
}
Use setState
counter(e) {
e.preventDefault();
this.state(prevState => ({willWatch: prevState.willWatch + 1}));
}

Changing multiple props const to class

I want to convert functional component in React to class based component, because I want to make use of state property.
Currently I have this component which has 2 props.
const VideoListItem = ({video, onVideoSelect}) => {
const imageUrl=video.snippet.thumbnails.default.url;
return (
<li onClick={() => onVideoSelect(video)} className="list-group-item">
<div className="video-list media">
<div className="media-left">
<img className="media-object" src={imageUrl} />
</div>
<div className="media-body">
<div className="media-heading">{video.snippet.title}</div>
</div>
</div>
</li>
)
}
I tried to convert it to class and ended up with this:
class VideoListItem extends React.Component {
render() {
const {video} = this.props.video
const imageUrl=video.snippet.thumbnails.default.url;
const{onVideoSelect} =this.props.onVideoSelect
return (
<li onClick={() => onVideoSelect(video)} className="list-group-item">
<div className="video-list media">
<div className="media-left">
<img className="media-object" src={imageUrl} />
</div>
<div className="media-body">
<div className="media-heading">{video.snippet.title}</div>
</div>
</div>
</li>
)
}
}
However It does not work, I get errors. I guess it has something to do with 2 props being in the component. Anyone has idea how can I change the first code to be a class component?

Your destructuring is a bit off:
const { video } = this.props.video;
const{ onVideoSelect } = this.props.onVideoSelect;
should be something like:
const { video } = this.props;
const{ onVideoSelect } = this.props;
and you can combine these if you want:
const { video, onVideoSelect } = this.props;

Convert string to real HTML in React.js

I received information from an API which comes with HTML. What happens is, when I try to display the information in the code, it transforms the HTML in a string and doesn't read as real HTML.
I search a lot and all I saw was the method of dangerouslySetInnerHTML but I also saw some reviews and comments about it and I don't want to use it if exists another solution. Also, I tried to use Fragmant but not success.
Below is my render() code:
return (
<div>
{models.map(model => (
<a href="/sofa">
<div className="Parcelas" key={model.id}>
<img
src={"url" + model.image}
className="ParcImage"
alt="sofa"
/>
<h1>Sofá {model.name}</h1>
<h2>
1,200<span>€</span>
</h2>
<p className="Features">{model.description}</p>
<button className="Botao">
<p className="MostraDepois">Ver Detalhes</p>
<span>+</span>
</button>
<img src="../../img/points.svg" className="Decoration" alt="points" />
</div>
</a>
))}
</div>
);
Here's an image showing:

If you have html in a string, you can use dangerouslySetInnerHTML to render it as html.
return (
<div>
{models.map(model => (
<a href="/sofa">
<div className="Parcelas" key={model.id}>
<img
src={"url" + model.image}
className="ParcImage"
alt="sofa"
/>
<h1>Sofá {model.name}</h1>
<h2>
1,200<span>€</span>
</h2>
<p
className="Features"
dangerouslySetInnerHTML={{ __html: model.description }}
/>
<button className="Botao">
<p className="MostraDepois">Ver Detalhes</p>
<span>+</span>
</button>
<img src="../../img/points.svg" className="Decoration" alt="points" />
</div>
</a>
))}
</div>
);

Check if the text you're trying to append to the node is no escaped like this:
model: {
description: '<h1>Hi there!</h1>'
}
Instead of this:
model: {
description: '<h1>Hi there!</h1>'
}
if is escaped you should convert it from your server-side.
if you can't try something like this:
<p className="Features">{model.description.fromCharCode(183)}</p>
Another option is a combination of ReactHtmlParser and unescapingHtml:
import ReactHtmlParser from "react-html-parser";
let model = [
{
description: "<h1>Hello There</h1>"
},
{
description: "<h1>Hello There</h1>"
}
];
function App() {
function unescapeHTML(html) {
var escapeEl = document.createElement("textarea");
escapeEl.innerHTML = html;
return escapeEl.textContent;
}
return (
<div className="App">
{model.map(des => {
return ReactHtmlParser(unescapeHTML(des.description));
})}
</div>
);
}