React-Redux How can I display the checkbox values? - reactjs

Question

I am trying to display the checkbox values but it is not showing anything on screen. Whatever values are selected from the checkbox are returning true in the console. How can I display the values that are selected. I am using redux forms. Even I want the values to be displayed in a comma seperated way. How can I achieve this? Thanks in advance.
Here's the code :
AddUser.js
import React, { Component } from 'react'
import { Field, reduxForm } from 'redux-form'
import { connect } from 'react-redux'
import { addUser } from '../../actions'
import './AddUser.css'
class AddUser extends Component {
renderInput(formProps) {
return (
<div>
<label>{formProps.label}</label>
<input {...formProps.input} type={formProps.type} max={formProps.max} autoComplete='off'
label={formProps.label} id={formProps.id}/>
{formProps.meta.touched &&
(formProps.meta.error && <span>{formProps.meta.error}</span>) }
</div>
)
}
onSubmit = (formValues) => {
console.log('formValues', formValues)
this.props.addUser(formValues)
}
render() {
const { handleSubmit } = this.props
const current = new Date().toISOString().split("T")[0]
return (
<div className='container wrapper'>
<form onSubmit={handleSubmit(this.onSubmit)}
className='form'>
<div>
<label>FullName</label>
<Field name='fullname' component={this.renderInput}
type='text' />
</div>
<div>
<label>Address</label>
<Field name='address' component={this.renderInput}
type='text' />
</div>
<div>
<label>BirthDate</label>
<Field name='birthdate' component={this.renderInput}
type='date'
max={current} />
</div>
<div>
<label>Select Your Gender</label>
<Field name='gender' component={this.renderInput} type='radio' value='male'
label='Male' />{' '}
<Field name='gender' component={this.renderInput} type='radio' value='female'
label='Female'/>{' '}
<Field name='gender' component={this.renderInput} type='radio' value='other'
label='Other' />{' '}
</div>
<div>
<label >Select Your Hobbies</label>
<Field name='travelling' component={this.renderInput} type='checkbox' value='travelling'
label='Travelling' />
<Field name='reading' component={this.renderInput} type='checkbox' value='reading'
label='Reading' />
<Field name='gaming' component={this.renderInput} type='checkbox' value='gaming'
label='Gaming' />
<Field name='doodling' component={this.renderInput} type='checkbox' value='doodling'
label='Doodling' />
</div>
<button type='submit'>Submit</button>
</form>
</div>
)
}
}
const validate = (formValues) => {
const errors = {}
if (!formValues.fullname) {
errors.fullname = 'You must enter a fullname'
}
if (!formValues.address) {
errors.address = 'You must enter the address'
}
if(!formValues.birthdate){
errors.birthdate='Please select your date of birth'
}
if(!formValues.gender){
errors.gender='Please select your gender'
}
return errors
}
export default connect(null, {
addUser: addUser
})(reduxForm({
form: 'adduser',
validate: validate
})(AddUser))
UsersList.js
import React, { Component } from 'react'
import {connect} from 'react-redux'
import {listAllUsers} from '../../actions'
class ListUsers extends Component {
componentDidMount(){
this.props.listAllUsers()
}
usersList(){
return this.props.users.map((user)=>{
return (
<div key={user.id}>
<div>{user.fullname}</div>
<div>{user.address}</div>
<div>{user.birthdate}</div>
<div>{user.gender}</div>
<div>{user.hobbies}</div>
<div>
<button>Edit</button>
</div>
<div>
<button>Delete</button>
</div>
</div>
)
})
}
render() {
return (
<div>
<h1>Users List</h1>
{this.usersList()}
</div>
)
}
}
const mapStateToProps=(state)=>{
console.log(state)
return {users:state.users}
}
export default connect(mapStateToProps,{listAllUsers:listAllUsers})(ListUsers)

Answer 1

I'll show you an example for showing checkbox value in 1 line, you should be able do it on your own case.
function App() {
const [selectedInput, setSelectedInput] = React.useState([]);
const renderSelected = (e) => {
const targtValue = e.currentTarget.value;
setSelectedInput((prev)=>
prev.some(data => data === targtValue ) ?
prev.filter(data => data !== targtValue ) :
[...prev, targtValue]
)
}
return (
<div>
<label >Select Your Hobbies:</label><br/>
<p>{selectedInput.map(data=>data+",")}</p>
<label>Travelling
<input name='travelling' onChange={renderSelected} type='checkbox' value='travelling'/></label>
<label>Reading
<input name='reading' onChange={renderSelected} type='checkbox' value='reading'/></label>
<label>Gaming
<input name='gaming' onChange={renderSelected} type='checkbox' value='gaming' /></label>
<label>Doodling
<input name='doodling' onChange={renderSelected} type='checkbox' value='doodling'/></label>
</div>
);
}
ReactDOM.render(
<App/>,
document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>