I've tried to use the 'react-twitch-embed-video' package with Reactjs, but the player seems to duplicate ( two iframes are generated when there's only one "ReactTwitchEmbedVideo" component ).
My code is very basic though :
import ReactTwitchEmbedVideo from "react-twitch-embed-video"
const App = () => {
return (
<div>
<ReactTwitchEmbedVideo channel='xqc' />
</div>
)
}
export default App
Related
How can I render the children as a string in React 18/Next 13?
React says renderToString is not suggested on the client, and it's not clear to me how to render it on the server.
The documentation here gives an example but it's not clear how it works in an actual react component as I get errors that I cannot create another node if the previous one wasn't removed from the head.
import { createRoot } from 'react-dom/client';
import { flushSync } from 'react-dom';
const div = document.createElement('div');
const root = createRoot(div);
flushSync(() => {
root.render(<MyIcon />);
});
console.log(div.innerHTML); // For example, "<svg>...</svg>"
Source
Whether I get the data on the server or client side, just looking for a working example either or.
function ExampleChildComponent() {
return (
<div className="bg-green-500 w-20 h-20">
Hello I am a green box
<button className="bg-blue-100 px-6 py-3">I am a button</button>
</div>
)
}
function LogChild({ children }: any) {
// How do you get the children to a string?
console.log(someFn(children));
// Interested in both an output showing <GreenBox />
// and/or the parsed version which shows the stuff inside GreenBox
return (
<p>Logged!</p>
)
}
function App(){
return (
<LogChild>
<ExampleChildComponent />
</LogChild>
)
}
Alternatively, if there's an open source project that I can just study works too. Google is very sparse in examples for this question. Either that or answers are pre React 18.
I created a new ReactJS app and corded it as below. It doesn't work. I need const person call into const app, How to do that?
"App.js"
import './App.css';
const person = () => {
return (
<>
<h1>Name : Shashimal</h1>
<h1>Age : 26</h1>
<h1>Gender : Male</h1>
</>
)
}
const App = () => {
return (
<div className="App">
<person />
</div>
);
}
export default App;
error code shown terminal
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
WARNING in [eslint]
src\App.js
Line 3:7: 'person' is assigned a value but never used no-unused-vars
webpack compiled with 1 warning
The problem is that when it comes to React components you must use component names first word capitalized. So, make person to Person
import './App.css';
const Person = () => {
return (
<>
<h1>Name : Shashimal</h1>
<h1>Age : 26</h1>
<h1>Gender : Male</h1>
</>
);
};
const App = () => {
return (
<div className="App">
<Person />
</div>
);
};
export default App;
If you want to use a component in ReactJS, capitalize the first letter:
const Person = () => {
return (
<>
<h1>Name : Shashimal</h1>
<h1>Age : 26</h1>
<h1>Gender : Male</h1>
</>
);
}
All components must start with a capital letter so you need to change each instance from person to Person
All you need to do is rename
const person = () => ...
to
const Person = () => ...
As per the React docs, when you create your own custom component, the component name needs to start with a capital letter. Otherwise, React thinks it is an HTML tag and tries to render it as one.
I have a component Recommended that makes a service call to firebase and renders the returned data. During the loading delay at the database call, I want to render a react skeleton, as follows:
Recommended.js
import { useState, useEffect } from "react";
import Skeleton from "react-loading-skeleton";
import { getVenues } from "../services/firebase";
import VenueCard from "./VenueCard";
const Reccomended = () => {
const [venues, setVenues] = useState([]);
useEffect(() => {
async function getAllVenues() {
const response = await getVenues();
await setVenues(response);
}
getAllVenues();
}, []);
venues[0] ? console.log(true) : console.log(false)
return (
<div>
{!venues[0] ? (
<>
<Skeleton />
</>
) : (
<>
<p className="recommended">Recommended for Josh</p>
<VenueCard venues={venues} />
</>
)}
</div>
);
};
export default Reccomended;
However, the skeleton is not rending during loading. The returning data is saved to the state variable venues, and I'm using the 'truthiness' as a conditional for the render. I tested this by logging the following:
venues[0] ? console.log(true) : console.log(false)
In the browser it initially logged false, followed quickly by true
So given this, I don't understand why the skeleton isn't loading - any suggestions?
I've also passed parameters into <Skeleton/> which didn't change anything.
You must include the CSS styles, or you won't see anything. Just add
import "react-loading-skeleton/dist/skeleton.css";
with the rest of the imports.
This is documented in the package readme in the react-loading-skeleton basic Usage section
I'm having a problem about the download of the kendo react chart as an image,
currently the download works but only for my latest chart (I have six of them)
I've recreated the error in stackblitz
As you can see whenever I try to download one of the 2 charts the downloaded one is always the latest one
Is there any way for fixing this?
The problem is that refContainer is being set twice inside your App component in the example you linked. One time for each of your charts. The reference will always refer to the second chart, because the second chart overwrites the value of refContainer last.
What you can do instead is to create a CustomChart component that holds its own ref (refContainer). This way you can render multiple instances of this component, without the refs clashing. This also allows us to get rid of some duplicate code for creating the chart.
So you can do something like this:
import * as React from "react";
import {
Chart,
ChartSeries,
ChartSeriesItem,
ChartCategoryAxis,
ChartCategoryAxisItem,
exportVisual,
} from "#progress/kendo-react-charts";
import { exportImage } from "#progress/kendo-drawing";
import { saveAs } from "#progress/kendo-file-saver";
const CustomChart = ({ categories, data }) => {
let refContainer = React.useRef(null);
const onExportVisual = () => {
const chartVisual = exportVisual(refContainer);
if (chartVisual) {
exportImage(chartVisual).then((dataURI) => saveAs(dataURI, "chart.png"));
}
};
return (
<>
<button onClick={() => onExportVisual()}>Export as visual element</button>
<Chart ref={(chart) => (refContainer = chart)}>
<ChartCategoryAxis>
<ChartCategoryAxisItem categories={categories} />
</ChartCategoryAxis>
<ChartSeries>
<ChartSeriesItem data={data} />
</ChartSeries>
</Chart>
</>
);
};
const App = () => {
return (
<div>
<CustomChart
categories={[2015, 2016, 2017, 2018]}
data={[10, 100, 100, 10]}
/>
<CustomChart
categories={[2015, 2016, 2017, 2018]}
data={[100, 10, 10, 100]}
/>
</div>
);
};
export default App;
I have a react component that is pulling in some data from a local json file. That data has some links to images. However the images aren't loading even though the paths are correct. I was using require before but in a different code setup. Now that I've transitioned it to this the images won't load. i'm using webpack 4 so i'm guessing i need to require the images again? How do i do that in the below statement ?
the part that is failing is the 'image={release.imageURL}' which is being passed to the 'src' of the component
import React from "react";
import ReactDOM from "react-dom";
import Release from "./release.js"
import data from "../data/releases.json"
const allReleases = data.map(release => {
return (
<div className="column-2">
<Release
key={release.id}
url={release.releaseURL}
image={release.imageURL}
cta={release.cta}
title={release.title}
artists={release.artists}
/>
</div>
)
})
const Releases = () => {
return (
<div>
<div className="row">
<h3>All Releases</h3>
{allReleases}
</div>
</div>
)
}
export default Releases;
Without knowing the details of what you're trying to achieve, I think you can do the following:
Because you're providing paths in your json, you'll need to require them dynamically.
releases.json
[
{
imageURL: "/image01.jpg"
},
{
imageURL: "/image02.jpg"
},
{
imageURL: "/image03.jpg"
}
]
then assuming you know the relative path to these images you can require them inside your map
const allReleases = data.map(release => {
return (
<div className="column-2">
<Release
url={require('./path/to/images' + release.imageURL)}
/>
</div>
)
})
Alternatively, you could make your releases.json a js file and import your images there and put them in your data as variables.
Bro, I was working on this problem and eventually figure it out:
1- All you have to do is changing the path of the image from your JSON file. That means the path should be related to your react component (allReleases).
2- Next thing, instead of using
*
<Release
key={release.id}
url={release.releaseURL}
image={release.imageURL} // ==> WRONG
cta={release.cta}
title={release.title}
artists={release.artists}
/>
Just go with:
*
<Release
key={release.id}
url={release.releaseURL}
image={`${release.imageURL}`} // ===> CORRECT
cta={release.cta}
title={release.title}
artists={release.artists}
/>