2

I want to use the new feature on React v16.0.0 for returning a string, then use that string in

<img src="returnedString" >

What is the current behavior?

Well if I render my component in a <div > <MyComponent /> </div>

I can see the string displayed on the screen (see attached screenshot), but my goal is to use that string in <img src="returnedString" />

here is my code:

// My component that returns strings
 class MyComponent extends Component {
   render(){

    switch (this.props.type) {
      case 'text':
        return this.props.json.data[this.props.Key]
        break
      case 'image':
        return this.props.json.data[this.props.Key]
        break
        default:
        return null
        break
    }
   }
 }

const UserComponent = (props) => {
  return (
    <div>
      {/* this displays the string on the page */}
      <MyComponent type='image' Key='avatar' desc='Abified image'  {...props} />

       {/* If I console.log this line I get <img src={[object object]} /> */}
       <img src={<MyComponent type='image' Key='avatar' desc='Abified image'  {...props} />} />
    </div>
   )
}

// Parent Component
class App extends Component {
constructor(props){
  super(props)
  this.state = {
   json:[]
  }
 }

 // Fetching data from an api
 componentDidMount(){
   fetch("https://reqres.in/api/users/2")
     .then(response => response.json())
     .then(json => {
       this.setState({json: json })
   })
 }

 render() {
 return (
   <div>
     <UserComponent {...this.state}/>
   </div>
  );
 }
}

export default App;

How Can I achieve that?

What is the expected behavior?

I want to use the returned string inside an

Which versions of React ?

React v16.0.0

Did this work in previous versions of React?

No because it's a new feature in React v16.0.0

enter image description here

AziCode
  • 2,510
  • 6
  • 27
  • 53

2 Answers2

1

If you want to set the image's src attribute dynamically, then use a plain javascript function instead of a component:

const getImageSrc = props => {
    switch (props.type) {
      case 'text':
      case 'image':
        return props.json.data[props.Key]
    }
}

Then you can call it from your component's render method like this:

<img src={ getImageSrc({...this.props, type: 'image', Key: 'avatar'}) } />
FuzzyTree
  • 32,014
  • 3
  • 54
  • 85
  • In my use case it needs to be a component. My implementation is currently returning a string if I render the component. ( I’ll add a screenshot to my question to clarify more) – AziCode Sep 27 '17 at 03:22
  • as you can see in the screenshot, if I render `` the `returned string` is displayed on the screen. Is it a good practice to add your `getImageSrc` as a method of `` then invoke it to get the `string` – AziCode Sep 27 '17 at 03:33
  • Thanks for the guidance, plain JavaScript function is the way to go – AziCode Sep 27 '17 at 18:19
  • Follow up question, I want to gather all those props when `case 'image'` and add them to the state of `` . I'm unable to do that because I'm unable to setState inside the render method – AziCode Sep 28 '17 at 18:50
  • @AziCode not sure I understand but you could call `getImageSrc` from inside of `MyComponent` and set the state there. If that's not what you're looking for then feel free to open a new question with the details and I'll take a look – FuzzyTree Sep 28 '17 at 22:38
0

Because this 

<MyComponent type='image' Key='avatar' desc='Abified image' />

is creating a text node in the dom.

But in this case

<img src={<MyComponent type='image' Key='avatar' desc='Abified image' {...props} />

your src attribute is getting a react element object.

You'll never get a string like that. If you want to get your src dynamically, try something like this

const UserComponent = (props) => {
// calculate you src here
 const imageSrc = props.json.data['avatar'];
 return (
   <div> 
     <img src={ imageSrc } />
   </div> 
 )
}

Hope this helps.

vs1682
  • 545
  • 2
  • 12