JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
  title
</h1>
<button>
  toggle ingredients
</button>
<ul style="display: none">

</ul>

JavaScript

const button = document.querySelector('button'),
      list = document.querySelector('ul')
      
button.addEventListener('click', toggleList)

function toggleList() {
  if (window.getComputedStyle(list).display === 'block') {
		list.style.display = 'none'
		return;
	}
  
	list.style.display = 'block'
}
      
recipe = {
  name: 'Something good',
  ingredients: [
    { ingredient: '1/2 cup milk' },
    { ingredient: '1 cup of stuff' },
    { ingredient: '1 pinch of this' }
  ]
}

document.querySelector('h1').innerHTML = recipe.name

recipe.ingredients.forEach((ingredient) => {
  var ingredientElement = document.createElement('li');
  ingredientElement.innerHTML = ingredient.ingredient;
  list.appendChild(ingredientElement)
})