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="name">Name</div>
<div class="button" data-which="age">Age</div>
<div class="button" data-which="sex">Sex</div>
<div class="button" data-which="occupation">Occupation</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>
    <h3>Data value:</h3>
	<div id="person-info-output"></div>
</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 personal_information = {
	name: 'Elise',
	age: 16,
	sex: 'Female',
	occupation: 'Student'
};

$('.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 person_info_element = personal_information[which_key];

	// Step 3: Add our text data to our layout using jQuery
	$('#person-info-output').html(person_info_element);
});