Send the image link as a parameter

I've been trying to pass an image link through two child components, but I'm having trouble. I added the link to the state and passed it down, but it doesn't work. Strangely, when I manually input the link in the child component, it works perfectly fine. I can't seem to figure out what's wrong.

class App extends React.Component{

    state = {
        currentImage: 'http://steemitimages.com/640x0/https://steemitimages.com/DQmZ5ZTZGH7odGrk3N7m6xvn2tS4Uz5G2RtkN5A2mM1GZnk/Lucius-Seneca-451x500.png',
    }
  render(){
    return (
        <>
            <Window
                image={this.state.currentImage}
            />
            <Form/>
        </>
    );
  }
}

//First Child

class Window extends React.Component {
    render() {
        return (
            <div className={styles.wrapper}>
                <div className={styles.content}>
                    <Quote image={this.props.image}/>
                </div>
            </div>
        )
    }
}

//Target child that should display pic

class Quote extends React.Component {

    render() {
        return(
            <div className={styles.wrapper}>
                <img
                    src={this.props.image}
                    className={styles.image}
                />
            </div>
        )
    }
}

Answer №1

I believe creating a constructor would be beneficial in this scenario.

class Application extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      currentImage: 'https://steemitimages.com/DQmZ5ZTZGH7odGrk3N7m6xvn2tS4Uz5G2RtkN5A2mM1GZnk/Lucius-Seneca-451x500.png'
    };
  }

  render(){
    return (
        <>
            <Window
                image={this.state.currentImage}
            />
            <Form/>
        </>
    );
  }
}

The issue lies with the state usage in the App component, not the props.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to include a secondary border to a responsive textarea?

Currently, I am utilizing Twitter Bootstrap 3.2.0 and below is the code snippet: Click here for jsFiddle .textarea textarea { background-color: white; background-image: url("http://ello.96.lt/images/as.jpg"); line-height: 1.56em; p ...

Issues with Markdown text editor code, table, and list functionalities are causing malfunction

Looking for a solution to use markdown editor for writing blog posts? If you're facing issues with code blocks, list items, tables, etc., not working correctly after publishing your markdown-based posts, while other elements like images, links, and bo ...

What role does the sequence play in matrix transitions that involve rotating and translating simultaneously?

Attempting to animate a matrix3d with both rotation and translation concurrently has yielded unexpected results for me. It seems that changing the order of applying rotation and translation produces vastly different outcomes. http://jsfiddle.net/wetlip/2n ...

What's the reason my JavaScript isn't functioning properly?

Brand new to coding and I'm delving into the world of Javascript for the first time. In my code, there's a checkbox nestled within an HTML table (as shown below). <td><input type="checkbox" id="check1"/> <label th:text="${item.co ...

Customizing checkboxes in React with JSS: A step-by-step guide

I'm currently working on customizing CSS using JSS as my styling solution, which is proving to be a bit complex while following the w3schools tutorial. https://www.w3schools.com/howto/howto_css_custom_checkbox.asp HTML: <label class="container"& ...

Looking to eliminate the vertical spacing of the <hr> tag?

Summary: For a quick solution, just click on the image at the bottom. Greetings to everyone! I am facing an issue with two <div> elements that I need to separate using a <hr class="separator"> element. Below is the CSS code for the ...

changing the RadioButtonList to preselect a default value

On a page, I have a pre-existing RadioButtonList where I want to make the second button checked by default instead of the first one. Since I am unable to edit the original control directly, it seems like I might need to achieve this using javascript on th ...

"Troubleshooting: My PHP script is not displaying CKEditor content stored in the database as HTML –

As I work on the blog section of a project, I encountered an issue with displaying HTML content saved from CKEditor in PHP. Instead of rendering the HTML tags, it shows plain text. I have attempted various solutions but haven't been able to fix the pr ...

I am attempting to set up react-router-dom by running "npm install react-router-dom," but I am encountering unfamiliar errors that I am unsure how to resolve

PS C:\ReactP\sample> npm install react-router-dom npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @material-ui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afccc0ddca ...

Updating a webpage by re-rendering it upon passing an id parameter through the url in React

As a beginner in React JS, I have encountered a problem. In my index page, I defined the routes and called for the component using the following code: <Route path="/assignments/organization/:id" component={Manifest} /> Within the "manifest ...

Reset all filters in React MaterialTable - clear filters for individual columns and the global filter

I'm brand new to react and I'm struggling with implementing an action that clears all table filters. I have date, drop-down, text, and global filters in my table and I'm looking for a way to clear all of them with just one click. Check out ...

Why am I getting the error in react-dom.development.js related to my index.js file?

Upon checking the console, the following message is displayed: react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Please use createRoot instead. Until you transition to the new API, your application will behave as if i ...

Using XSLT with JavaScript

I am currently working with a set of XML files that are linked to XSLT files for rendering as HTML on a web browser. Some of these XML files contain links that would typically trigger an AJAX call to fetch HTML and insert it into a specific DIV element on ...

Switching Bootstrap Navbar Active State with JavaScript

I have encountered an issue with using the "active" class on my navbar navigation items in Bootstrap 4. When I click on the links, the active state does not switch as intended. I have tried incorporating JavaScript solutions from similar questions but have ...

Struggling to make React respond to button clicks without resorting to using addEventListener

Can anyone help me figure out why I can't get the onclick handler to execute in reactjs when specifying it inline for a button? The only solution that worked for me was using addEventListener. From what I understand, this code should work: <button ...

The v-btn label in Vuetify is extending beyond the lateral borders and overlapping

In this scenario, the button is supposed to break the line and increase its height. However, the text is overlapping the lateral borders (you can see this behavior in the Codepen link provided below). Is there a way to correct this issue? Codepen Link & ...

Is there a way to handle button click event when utilizing this.props.children in React?

I have recently completed a React component that serves as a modal wrapper. The content for this modal is passed through the props.children property. Inside the content, there is a button that, when clicked, should trigger an event in the parent component. ...

Seeking assistance with changing the pages

Looking for assistance with troubleshooting my function. All variables are accounted for. var swith = document.getElementById("sub"); var one = document.getElementById("rule"); var two = document.getElementById("cool"); var three = document.getElementByI ...

Height not being applied to DIV container

I'm facing an issue with my CSS code that is causing images to break the row after reaching the end of the DIV. However, the container behind it is not adjusting its height according to the images. The height should expand along with the images. Here ...

Creating HTML code that is optimized for mobile devices

My front end design is based on the CSS stylesheet from W3Schools.com, which includes a class property called "w3-rightbar" for adding a thick right border. However, I encountered an issue where I needed to hide this "w3-rightbar" specifically on mobile vi ...