score:2

Accepted answer
  1. your props naming needs review :

    props.edit ='true' 🤔 it can be props.mode = 'edit' or 'view'

  2. mitigate the conditional logic (if...else) of render method and break down it into methods prefixed by "render".

  3. solution will be :

      renderbuttons() {
        if (this.props.mode === 'edit') 
          return (
            <div classname="buttonlist">
                <button onclick={this.onsave} classname='defaultbtn'>save</button>
                <button onclick={this.goback} classname='defaultbtn'>discard changes</button>
            </div>
          )
        else {
          return (
             <div classname="buttonlist">
                <button onclick={this.goback} classname='defaultbtn'>back</button>
              </div>
           ) 
        }
      }
    
      rendertextfield() {
        if (this.props.mode != 'edit') return null;
        return (
          <textfield type='text' floatinglabeltext='image url' onchange={this.onimageurlchange}></textfield>
        )
      }
    
    
    
      render() {
    
          return (
              <div classname="single">
                  <img src={this.state.recipe.imageurl} />
                  <div classname='recipedetails'>
                      <h1>{this.state.recipe.name}</h1>
                      {this.rendertextfield()}
                      <ingredientlist oningredientchange={this.oningredientchange}
                          ondelete={this.ondelete}
                          ingredients={this.state.recipe.ingredients}
                          edit={this.props.edit}
                          addingredient={this.addingredient} />
                      {this.renderbuttons()}
                  </div>
              </div>
          );
      }
    

Related Query

More Query from same tag