html - Pass image link as props

Question

I wanted to pass image link through 2 child components. I put my link inside state and passed it but it's not working. When I manually put link in child component it's working the way it should. What is the matter, can't figure it out.

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>
        )
    }
}

question from:https://stackoverflow.com/questions/65643198/pass-image-link-as-props

Answer 1

I think you should make a constructor.

class App 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/>
        </>
    );
  }
}

There is no problem with props.. Just you misused state in App component.