Sé cómo alternar una clase en React y sé cómo activar una clase. Sin embargo, no puedo entender cómo juntarlos a ambos.

Mapeo mis recetas y renderizo cada una. Quiero expandir una receta una vez que se hace clic y luego, si se vuelve a hacer clic, volver a su estado natural. pero si tengo una receta abierta y presiono expandir en otra, entonces debería cerrar la primera y luego expandir la nueva.

Este es mi componente completo:

state = {
    term: '',
    selectedRecipeId: 0
  }

  handleInput = (e) => {
    const { value } = e.target;
    this.setState({term: value})
  }

  expandRecipe = (recipeId) => {
    this.setState({ selectedRecipeId: recipeId })
  }

  renderExpandedView = (recipe) => {
    if (this.state.selectedRecipeId === recipe.id){
      return 'recipeContainerExpanded'
    }
    else {
      return null
    }
  }

  resetView = () => {
    this.setState({selectedRecipeId: 0})
  }

  render(){
    const { recipes } = this.props;
    const { term } = this.state;
    return (
      <div>
        <h1>Recipes</h1>
        <button onClick={this.resetView}>Reset View</button>
        <input onChange={this.handleInput} />
        <div className="recipesContainer">
          {recipes.filter(recipe => recipe.name.toLowerCase().includes(term.toLowerCase()) || recipe.ingredients.some(ingredient => ingredient.startsWith(term.toLowerCase()))).map((recipe, index) => (
            <div key={index} className={`recipeContainer ${this.renderExpandedView(recipe)}`}>
              <h3>{recipe.name}</h3>
              <button onClick={() => this.expandRecipe(recipe.id)}>Expand</button>
              <h4>Ingredients</h4>
              <p>{recipe.ingredients.map(ingredient => <p>{ingredient}</p>)}</p>
            </div>
          ))}
        </div>
      </div>
    )
  }

Este código expandirá una receta y luego, si hace clic en otra, expandirá esa y cerrará la anterior. Solo quiero agregar funcionalidades que con el segundo clic cierren esa receta, pero no puedo trabajar cómo hacerlo sin aplicar el javascript a cada receta.

Espero que tenga sentido

0
The Walrus 23 feb. 2018 a las 14:47

3 respuestas

La mejor respuesta

Puede extraer la receta al componente Receta y usar el método de ciclo de vida shouldComponentUpdate para informar a React si la salida de un componente no se ve afectada por los accesorios de cambio actuales.

export default class Recipe extends Component {
expandRecipe = () => {
    const {onExpand, recipe, isExpanded} = this.props;

    onExpand(isExpanded ? null : recipe.id);
};

shouldComponentUpdate(nextProps) {
    const {isExpanded} = this.props;

    return isExpanded !== nextProps.isExpanded;
}

render() {
    const {recipe, isExpanded} = this.props;

    return (
        <div className={`recipeContainer ${isExpanded ? 'recipeContainerExpanded' : ''}`}>
            <h3>{recipe.name}</h3>
            <button onClick={this.expandRecipe}>Expand</button>
            <h4>Ingredients</h4>
            <p>{recipe.ingredients.map(ingredient => <p>{ingredient}</p>)}</p>
        </div>
    )
}
}

Consulte la demo

0
Igor Alemasow 23 feb. 2018 a las 12:45

Cree un componente separado que se encargará de expandirse.

Expandable.js

class Expandable extends React.PureComponent {
constructor() {
super();
this.state = {
  isExpand: true,
  selectedRecipeId: 0,
};
this.togglePar = :: this.expandRecipe;
}
expandRecipe(recipeId) {
this.setState({
  isExpand: !this.state.isPar,
  selectedRecipeId: recipeId,
});
}
render() {
 return (
  <div>
    <h3>{this.props.name}</h3>
    <button onClick={() => this.expandRecipe(this.props.id)}>Expand</button>
    {this.state.isExpand && <div>
      <h4>Ingredients</h4>
      <p>{this.props.ingredients.map(ingredient => <p>{ingredient}</p>)}</p>
      </div>
     }
    </div>
   );
  }
}

ActualComponent

  render() {
  const { recipes } = this.props;
  const { term } = this.state;
  return (
  <div>
    <h1>Recipes</h1>
    <button onClick={this.resetView}>Reset View</button>
    <input onChange={this.handleInput} />
    <div className="recipesContainer">
      {recipes.filter(recipe => 
      recipe.name.toLowerCase().includes(term.toLowerCase()) || 
      recipe.ingredients.some(ingredient => 
      ingredient.startsWith(term.toLowerCase()))).map((recipe, index) => (
        <Expandable key={index} props... />
      ))}
    </div>
  </div>
 )
}
0
Muneeb 23 feb. 2018 a las 12:51

Acabo de hacer una demostración con mis suposiciones, consulte el enlace: demo

Es eso lo que necesitas o dame más detalles para resolver este problema

0
Jayavel 23 feb. 2018 a las 12:14