JSFiddle - React, Tailwind, and code Playground

by Michael Keller

HTML

<!-- Step 1: As our data attribute, `data-which`, set the string corresponding to the key in our data dictionary -->
<h3>Data keys:</h3>
<div class="button" data-which="german_shepherd">German Shepherd</div>
<div class="button" data-which="labrador">Labrador</div>

<!-- Step 2: This is where we'll eventually add our text information. -->
<!-- In the previous example, this was where we put our `<img>` tag, now it's text -->
<div id="dog-info-output">
    <h3>Data values:</h3>
	<h4></h4>
	<p></p>
</div>

CSS

.button{
    display: inline-block;
    padding: 3px 5px;
    border: 1px solid #ccc;
}

.button:hover{
    cursor: pointer;
    background-color: #eee;
}

h3{
    font-weight: normal;
    text-decoration: underline;
}

JavaScript

var dog_information = {
	german_shepherd: {
		name: 'German Shepherd',
		text: 'These dogs are awesome and are my favorite.'
	},
	labrador: {
		name: 'Labrador',
		text: 'A very popular choice, these fun loving animals compensate for their mild intelligence with overwhelming enthusiasm.'
	}
};

$('.button').on('click', function(){
	// Step 1: Eyedrop the string that corresponds to a key in our data dictionary
	var which_key = $(this).attr('data-which');
	
	// Step 2: Use bracket notation to plug in our eyedropped key, which will return the information about that dog
	var dog_name = dog_information[which_key].name;
	var dog_text = dog_information[which_key].text;

	// Step 3: Add our text data to our layout using jQuery
	$('#dog-info-output h4').html(dog_name);
	$('#dog-info-output p').html(dog_text);
});