React: Props - Why does one work, but another not

react ...props syntax
react hooks
react pass props to component
react lifecycle
react fragment
react router
react proptypes
objects are not valid as a react child

I have the following Problem:

When I enter the URL to my image directly in the component, it works and gets displayed:

import React, { Component } from 'react';
import './Service.css';

class Service extends Component {
  render() {
    return (
      <div>
        <h2 className="logo">{this.props.serviceName}</h2>
        <img src={require("../../images/project_management.jpg")} width="150" alt="Smiley face" />
      </div>
    );
  }
}
export default Service;

But when I send the image url through the "props" from the outer component it does not work, although ist the exact same string. I get "Error: Cannot find module '../../images/project_management.jpg'"

import React, { Component } from 'react';
import './Home.css';
import Service from './modules/Service';

class Home extends Component {
  render() {
    return (
      <div className="outer-container">
        <div className="inner-container">
          <Service serviceName="Project Manager" img="../../images/project_management.jpg" />
        </div>
      </div>
    );
  }
}
export default Home;
import React, { Component } from 'react';
import './Service.css';

class Service extends Component {
  render() {
    return (
      <div>
        <h2 className="logo">{this.props.serviceName}</h2>
        <img src={require(this.props.img)} width="150" alt="Smiley face" />
      </div>
    );
  }
}
export default Service;

Can anybody give me a hint?

Thanks Regards

This is probably (you have to confirm this) you are using webpack and an image loader to load the content. Webpack will make a static analysis to understand which static assets it needs to include, however, when you make a dynamic require (this means, require a variable) like require(this.props.image) webpack has no idea at bunndle time of what you want to load. The solution is to always load the full path to the image, then pass that on props:

import React, { Component } from 'react';
import './Home.css';
import Service from './modules/Service';

class Home extends Component {
  render() {
    return (
      <div className="outer-container">
        <div className="inner-container">
          <Service serviceName="Project Manager" img={require("../../images/project_management.jpg")} />
        </div>
      </div>
    );
  }
}
export default Home;
import React, { Component } from 'react';
import './Service.css';

class Service extends Component {
  render() {
    return (
      <div>
        <h2 className="logo">{this.props.serviceName}</h2>
        <img src={this.props.img} width="150" alt="Smiley face" />
      </div>
    );
  }
}
export default Service;

This is the correct way of doing it if you are using any image bundler that works like I described.

Render Props – React, Components are the primary unit of code reuse in React, but it's not always handleMouseMove}> {/* but how do we render something other than a <p>? This approach will work for our specific use case, but we haven't achieved the� React Props are like function arguments in JavaScript and attributes in HTML. Props are also how you pass data from one component to another, as parameters.

Use absolute path to image instead of relative

<Service serviceName="Project Manager" img={absoltePathToImage} />

Service tries to find the image relative to it's path and fails

If you want to use relative paths(bad idea)

Use

<Service serviceName="Project Manager" img="../../../images/project_management.jpg" />

As service is one layer deeper to Home

Components and Props – React, This function is a valid React component because it accepts a single “props” ( which For example, <div /> represents an HTML div tag, but <Welcome /> represents a component and Components can refer to other components in their output. bottom-up with a small component like Button and gradually work your way to� In this document, we’ll discuss why render props are useful, and how to write your own. Use Render Props for Cross-Cutting Concerns . Components are the primary unit of code reuse in React, but it’s not always obvious how to share the state or behavior that one component encapsulates to other components that need that same state.

instead of using require like one in your code

<img src={require("../../images/project_management.jpg")} width="150" alt="Smiley face" />

you should provide and url directly to src atrib and use it as:

<img src={this.props.img} width="150" alt="Smiley face" />

Unknown Prop Warning – React, The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. Good: You can also assign the props to a new object and delete the keys that you're� The defaultProps will be used to ensure that this.props.name will have a value if it was not specified by the parent component. The propTypes typechecking happens after defaultProps are resolved, so typechecking will also apply to the defaultProps .

thank you. Moving the "require"-Statement to the outer component solved the problem:

import React, { Component } from 'react';
import './Home.css';
import Service from './modules/Service';

class Home extends Component {
  render() {
    return (
      <div className="outer-container">
        <div className="inner-container">
          <Service serviceName="Project Manager" img={require("../images/project_management.jpg")} />
          <Service serviceName="Software Engineer" img={require("../images/project_management3.jpg")} />
          <Service serviceName="Web Developer" img={require("../images/web_development.jpg")} />
        </div>
        <div className="inner-container">
          <Service serviceName="Requirements Enigneer" img={require("../images/requirements_engineering.jpg")} />
          <Service serviceName="Quality Manager" img={require("../images/quality_management.jpg")} />
          <Service serviceName="Trainer" img={require("../images/trainer.jpg")} />
        </div>
      </div>
    );
  }
}
export default Home;

The beginner's guide to mastering React props, Understanding the way props work is essential to mastering React, but to grasp the concept fully is no easy thing. they are used in a React application to send data from one React component to another React component. While you could add a ref to the child component, this is not an ideal solution, as you would only get a component instance rather than a DOM node. Additionally, this wouldn’t work with function components. If you use React 16.3 or higher, we recommend to use ref forwarding for these cases.

How to pass props to components in React, They are one of the early things you will learn in React after initially grasping React's JSX syntax. React props are not being passed in Components; React props key is undefined; Pass But you can also pass other data structures with inline props. At the moment, the application wouldn't work this way. If you choose not to assign an explicit key to list items then React will default to using indexes as keys. Here is an in-depth explanation about why keys are necessary if you’re interested in learning more. Extracting Components with Keys . Keys only make sense in the context of the surrounding array.

What is “Props” and how to use it in React? | by Cem Eygi, React has a different approach to data flow & manipulation than other and is being used for passing data from one component to another. But the important part here is that data with props are being passed in a uni-directional flow. coming from the parent should not be changed by child components. React components can, and often do, have state. State can be anything, but think of things like whether a user is logged in or not and displaying the correct username based on which account is active. Or an array of blog posts. Or if a modal is open or not and which tab within it is active. React components with state render UI based

What is Props and State in React? ― Scotch.io, Meeting props and state when taking your baby steps as a ReactJS notion that props are always passed from parent to child but this may not always be the case . If you rely on a new state without waiting for setState() to finish its work, you� This is a place to share common problems and solutions to them. The examples use React, but you should still find them useful if you use something else. #Nothing happens when I dispatch an action. Sometimes, you are trying to dispatch an action, but your view does not update. Why does this happen? There may be several reasons for this.

Comments
  • The solution might be to not use relative paths at all.