How to use

sourceName

function

in

Array

render(){
    console.log(this.props);
    const recipe = this.state.activeRecipe;
    return(
      <div className='container'>
        {   this.state.activeRecipe.length !== 0 &&
          <div className='active-recipe'>
            <img className='active-recipe__img' 
              src={recipe_url + recipe.image} 
              alt={recipe.title} />
            <h3 className='active-recipe__title'>{recipe.title}</h3>
            <h4 className='active-recipe__publisher'>
              Credit: <span>{recipe.sourceName}</span>
            </h4>
            <p className='active-recipe__website'>Website:
              <a href={recipe.sourceUrl}><span>{recipe.sourceName}</span></a>
            </p>
            <button 
              className='active-recipe__button'>
                <Link to='/'>Home</Link>
            </button>
          </div>    
        }    
      </div>
      
    );
  }