I have an react application, that I created with Create-React-App. My objective is when a user clicks on an image, the image changes. So, I want the image to come from the props.
For some reason, this code does not work.
<img alt="mug shot" src={this.props.photo} />
However, this works
<img alt="mug shot" src={require('../../Assets/Photos/Four.png')}/>
What am I doing wrong here?
I assume you are bundling your app using Webpack. Probably, you might be using a file-loader/url-loader to process the image. So, when you require something that ends with image file extension, webpack runs the contents of that file through this loader. For more information, check https://survivejs.com/webpack/loading/images/
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
img:'https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg'
}
this.changeImg = this.changeImg.bind(this);
}
changeImg() {
this.setState({
img:'http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg'
})
}
render() {
return(
<div>
<ImageChande change={this.changeImg} src={this.state.img} />
</div>
);
}
}
class ImageChande extends React.Component {
render() {
return(
<div>
<img onClick={this.props.change} alt="something" src={this.props.src} />
</div>
);
}
}
Related
This is a whitebox.jsx file where i have a state "wbimage", it should contain an image url that will be displayed in className="wbimgframe". I want to access and edit this state i.e, give image url to "wbimage" in another jsx file - javaa.jsx
whitebox.jsx
import "./whitebox.css"
class Whitebox extends Component {
constructor(props) {
super(props);
this.state ={
wbimage: '',
};
}
render() {
return (
<div>
<div className="wbdemo" >
<div className="wbimgframe">
<center>
<img src={this.state.wbimage} alt="Given image will be displayed here"/>
</center>
</div>
<div className="wbdemobookname">
<label>Book Name</label>
</div>
<div className="wbdemobookauthor">
<i><label>By </label>
<label>Book Author</label></i>
</div>
</div>
</div>);
}
}
export default Whitebox;
I have tried this, but still nothing is displayed in image.
javaa.jsx
import Whitebox from "./whitebox";
import "./javaa.css";
class Javaa extends Component {
render() {
return (
<div>
<br/><br/><br/><br/><br/>
<div className="javaamp">
<Whitebox>
{this.props.wbimage} = "https://cdn.codegym.cc/images/article/960defdc-e2f5-48ac-8810-d8b4436a88a7/512.jpeg"
</Whitebox>
</div>
</div>);
}
}
export default Javaa;
Please help, I am a beginner. So if this question seems easy, please don't mind :)
parent component (From where you have to send the data)
<Whitebox wbimage="https://cdn.codegym.cc/images/article/960defdc-e2f5-48ac-8810-d8b4436a88a7/512.jpeg">
Child component (from where you are gonna receive the data and use it in your HTML.
console.log(this.props.wbimage)
Check out this to understand better https://reactjs.org/docs/components-and-props.html
I am making a web editor using React & SlateJS. There are LaTex code in the editor content and I want the user to see the rendered LaTex equations. MathJax and KaTex have auto-rendering feature by loading them as CDNs. Once they are loaded, the content on html body is rendered. But they are not live-rendering when I modify the content.
So I have made a button that opens a modal which renders the un-editable edior content in a smaller window, and I want the LaTex codes to be rendered in the modal.
The APP component:
import {Editor} from 'slate-react';
import ReactModel from 'react-modal';
import RenderedEditorDialog from "./RenderedEditorDialog";
class APP extends React.component {
...
render() {
return (
<div className={"editorContainer"}>
<div className={"editor"}>
<Editor
autoFocus
ref={this.ref}
value={this.state.value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderMark={this.renderMarks}
renderBlock={this.renderBlock}
/>
</div>
<ReactModal
isOpen={this.state.showMathDialog}
contentLabel="Rendered content"
onRequestClose={this.handleCloseMathDialog}
>
<button onClick={this.handleCloseMathDialog}>Close Dialog</button>
<RenderedEditorDialog value={this.state.value}/>
</ReactModal>
</div>
)
}
}
RenderedEditorDialog (modal) component:
import {Editor} from 'slate-react';
class RenderedEditorDialog extends React.Component {
// eslint-disable-next-line no-useless-constructor
constructor(props) {
super(props);
}
render() {
return (
<div>
<Editor
value={this.props.value}
renderMark={this.renderMarks}
renderBlock={this.renderBlock}/>
</div>
)
}
}
My question is how I can apply MathJax/KaTex to render the content in RenderedEditorDialog component?
Thanks in advance!
KaTeX can be applied to individual DOM elements on demand, instead of all at once, by calling renderMathInElement when desired. Calling this from componentDidUpdate should do the trick:
import {Editor} from 'slate-react';
class RenderedEditorDialog extends React.Component {
constructor(props) {
super(props);
this.ref = React.createRef();
}
render() {
return (
<div ref={this.ref}>
<Editor
value={this.props.value}
renderMark={this.renderMarks}
renderBlock={this.renderBlock}/>
</div>
)
}
componentDidUpdate() {
renderMathInElement(this.ref.current, katexOptions);
}
}
I'm more comfortable with hook-based components instead of classes, which would look like this:
function RenderedEditorDialog(props) {
const ref = useRef();
useEffect(() => {
renderMathInElement(ref.current, katexOptions);
});
return (
<div ref={ref}>
<Editor
value={props.value}
renderMark={props.renderMarks}
renderBlock={props.renderBlock}/>
</div>
)
};
I'm not sure whether you want this on RenderedEditorDialog or another more specific component, but this should give you the idea. For speed, you want to apply renderMathInElement to the smallest container that contains the updated math.
I Have a react-loading-skeleton in my component, i have a static image in my page that i loaded using img tag, i want to show a skeleton component until the image loads.
I tried react.lazy and suspense but it only shows until the component load not works until image loads completely.
import React from 'react';
export default class SlideItems extends React.Component {
render() {
return (
<div>
<img src={require("./someImg.jpg")}/>
</div>
);
}
}
Start by adding constructor and state to class:
constructor(props) {
super(props);
this.state = {
image: '',
}
}
You can then add onLoad property to image tag like this:
<img src={require("./someImg.jpg")} onLoad={this.handleImageLoaded.bind(this)}/>
And create function that handles image loading:
handleImageLoaded() {
this.setState({ image: 'loaded' });
}
Then in render you can do something like this:
render() {
return (
<div>
{!this.state.image &&
<SkeletonComponent/>
}
<img src={require("./someImg.jpg")} onLoad={this.handleImageLoaded.bind(this)}/>
</div>
);
}
currently working on react. I have two components lets say ad and home . Inside home components i have one image and on click event of that image i want to render ad inside home component below image. Is there any simples method . thank you!
check this. i think this is what you want
//dynamically generate div
let DynamicDiv=()=>{
return (<div>
<p>i am here</p>
</div>)
}
class App extends Component {
constructor(props){
super(props)
this.state={
visible:false //visibility of Component
}
this.divVisiblity=this.divVisiblity.bind(this) //function is bind when user clicks on pic
}
divVisiblity(){
//this function will get called when user clicks on function
this.setState(()=>{return {visible:!this.state.visible}}) //changes visible state of Component when user clicks
}
render() {
return (
<div>
<div className="App">
{/* onClick is assigned function named divVisiblity */}
<img onClick={this.divVisiblity} src="https://placekitten.com/g/200/300" alt="test"/>
{/*this is ternary if else statement in js */}
{/* if visible = true ,display Component else dont */}
<div>
{this.state.visible && <DynamicDiv/>}
</div>
);
}
}
I think that will help to you.
export default class HomeComponent extends Component<Props> {
constructor(props) {
super(props);
this.state = {
renderAdComponent: false
};
this.onClickHandler = this.onClickHandler.bind(this);
}
onClickHandler() {
this.setState({renderAdComponent: !this.state.renderAdComponent})
}
render() {
return (
<View>
<Image onClick={this.onClickHandler}/>
{this.state.renderAdComponent ? <AdComponent/> : null}
</View>
);
}
}
What #sdkcy suggested is okay but the ternary operator isn't really needed. You can do the following
{ this.state.isAdShown && <ComponentToShow /> }
This gets rid of the useless : null result.
My image Component won't seem to actually put the image in, the URL is correct as I can add it by physically adding the HTML into the page.
The component seems to be failing. I tried what I found at http://facebook.github.io/react/docs/jsx-in-depth.html#attribute-expressions
but it did not help.
export default class mainLogo extends React.Component {
render() {
return (
<div>
<img src = {'/src/app/assets/images/home/mainLogo.png'}/>
</div>
);
}
}
The class name should start with a capital letter (MainLogo) and you shouldn't use {} on the src, because you are sending the img url directly to the src. It's not a variable or state.
This should work:
export default class MainLogo extends React.Component {
render() {
return (
<div>
<img src='/src/app/assets/images/home/mainLogo.png' />
</div>
);
}
}